Reixa CSS

O sistema de cuadrícula predeterminado de Bootstrap representa a culminación de máis dunha década de técnicas de deseño CSS, probadas e probadas por millóns de persoas. Pero tamén se creou sen moitas das funcións e técnicas CSS modernas que estamos a ver en navegadores como a nova CSS Grid.

Cómo funciona

Con Bootstrap 5, engadimos a opción de activar un sistema de cuadrícula separado que está construído en CSS Grid, pero cunha torsión de Bootstrap. Aínda recibes clases que podes aplicar por capricho para crear deseños receptivos, pero cun enfoque diferente baixo o capó.

• CSS Grid está activado. Desactive o sistema de grade predeterminado configurando $enable-grid-classes: falsee habilite a grade CSS configurando $enable-cssgrid: true. Despois, recompila o teu Sass.

• Substitúe as instancias de .rowpor .grid. A .gridclase establece display: gride crea un contido grid-templateque se crea co teu HTML.

• Substitúe .col-*as clases por .g-col-*clases. Isto débese a que as nosas columnas CSS Grid usan a grid-columnpropiedade en lugar de width.

• As columnas e os tamaños de canalóns establécense mediante variables CSS. Establece estes no pai .gride personaliza como queiras, en liña ou nunha folla de estilo, con --bs-columnse --bs-gap.

No futuro, é probable que Bootstrap cambie a unha solución híbrida xa que a gappropiedade conseguiu compatibilidade case total do navegador para flexbox.

Diferenzas clave

En comparación co sistema de reixa predeterminado:

• As utilidades Flex non afectan as columnas CSS Grid do mesmo xeito.

• Gaps substitúe canalóns. A gappropiedade substitúe a horizontal paddingdo noso sistema de grade predeterminado e funciona máis como margin.

• Polo tanto, a diferenza .rowde s, .grids non teñen marxes negativas e as utilidades de marxe non se poden usar para cambiar as cunetas da reixa. Os ocos da grade aplícanse horizontal e verticalmente por defecto. Consulte a sección de personalización para obter máis detalles.

• Os estilos en liña e personalizados deberían verse como substitutos das clases modificadoras (por exemplo, style="--bs-columns: 3;"vs class="row-cols-3").

• O aniñamento funciona de xeito similar, pero pode esixir que restableza os recontos de columnas en cada instancia dun .grid. Consulte a sección de anidación para obter máis detalles.

Exemplos

Tres columnas

.g-col-4Usando as clases pódense crear tres columnas de igual ancho en todas as ventás e dispositivos . Engade clases receptivas para cambiar o deseño polo tamaño da ventana gráfica.

<div class="grid">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Sensible

Usa clases adaptativas para axustar o teu deseño en todas as ventanas gráficas. Aquí comezamos con dúas columnas nas vistas máis estreitas e despois crecemos ata tres columnas nas vistas medianas e superiores.

<div class="grid">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

Compáreo con este deseño de dúas columnas en todas as vistas.

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Envoltura

Os elementos da grade envolven automaticamente á seguinte liña cando non hai máis espazo horizontalmente. Teña en conta que gapaplícase aos espazos horizontais e verticais entre os elementos da grade.

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Comeza

As clases de inicio pretenden substituír as clases de compensación predeterminadas da nosa grade, pero non son totalmente iguais. CSS Grid crea un modelo de grella a través de estilos que indican aos navegadores que "comecen nesta columna" e "terminen nesta columna". Esas propiedades son grid-column-starte grid-column-end. As clases de inicio son abreviaturas para as primeiras. Vinculaos coas clases de columnas para dimensionar e aliñar as túas columnas como necesites. As clases de inicio comezan en 1xa 0que un valor non válido para estas propiedades.

<div class="grid">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

Columnas automáticas

Cando non hai clases nos elementos da grella (os fillos inmediatos dun .grid), cada elemento da grella pasará automaticamente a unha columna.

<div class="grid">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Este comportamento pódese mesturar con clases de columnas de grella.

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Aniñación

Semellante ao noso sistema de cuadrícula predeterminado, a nosa grade CSS permite un fácil aniñamento de .grids. Non obstante, a diferenza do predeterminado, esta grade herda os cambios nas filas, columnas e ocos. Considere o seguinte exemplo:

• Anulamos o número predeterminado de columnas cunha variable CSS local: --bs-columns: 3.
• Na primeira columna automática, o reconto de columnas herdarase e cada columna é un terzo do ancho dispoñible.
• Na segunda columna automática, restablecemos o reconto de columnas do anidado .grida 12 (o noso valor predeterminado).
• A terceira columna automática non ten contido aniñado.

Na práctica, isto permite deseños máis complexos e personalizados en comparación co noso sistema de grade predeterminado.

<div class="grid" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

Personalización

Personaliza o número de columnas, o número de filas e o ancho dos espazos con variables CSS locais.

Estas variables CSS non teñen ningún valor predeterminado; en cambio, aplican valores alternativos que se usan ata que se proporciona unha instancia local. Por exemplo, usamos var(--bs-rows, 1)para as nosas filas CSS Grid, que ignora --bs-rowsporque aínda non se estableceu en ningún lugar. Unha vez que estea, a .gridinstancia usará ese valor en lugar do valor alternativo de 1.

Non hai clases de cuadrícula

Os elementos fillos inmediatos de .gridson elementos de grade, polo que se dimensionarán sen engadir unha .g-colclase explícitamente.

<div class="grid" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Columnas e ocos

Axuste o número de columnas e o espazo.

<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Engadindo filas

Engadindo máis filas e cambiando a colocación das columnas:

<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

Lagoas

Cambia os espazos verticais só modificando o row-gap. Teña en conta que usamos gapen .grids, pero row-gape column-gappódese modificar segundo sexa necesario.

<div class="grid" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Por iso, pode ter diferentes gaps verticais e horizontais, que poden tomar un único valor (todos os lados) ou un par de valores (vertical e horizontal). Isto pódese aplicar cun estilo en liña para gap, ou coa nosa --bs-gapvariable CSS.

<div class="grid" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Sass

Unha limitación da CSS Grid é que as nosas clases predeterminadas aínda son xeradas por dúas variables Sass $grid-columnse $grid-gutter-width. Isto predetermina efectivamente o número de clases xeradas no noso CSS compilado. Aquí tes dúas opcións:

• Modifica esas variables Sass predeterminadas e recompila o teu CSS.
• Use estilos en liña ou personalizados para aumentar as clases proporcionadas.

Por exemplo, pode aumentar o reconto de columnas e cambiar o tamaño do espazo e, a continuación, dimensionar as súas "columnas" cunha mestura de estilos en liña e clases de columnas CSS Grid predefinidas (por exemplo, .g-col-4).

<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>