CSS Grid

El sistema de grid predeterminado de Bootstrap representa la culminación de más de una década de técnicas de layout CSS, probadas y testadas por millones de personas. Pero, también fue creado sin muchas de las características y técnicas modernas de CSS que estamos viendo en navegadores como el nuevo CSS Grid.

Cómo funciona

Con Bootstrap 5, hemos añadido la opción de habilitar un sistema de grid separado que está construido sobre CSS Grid, pero con un toque de Bootstrap. Sigues teniendo clases que puedes aplicar libremente para construir layouts responsivos, pero con un enfoque diferente por debajo.

• CSS Grid es opcional. Deshabilita el sistema de grid predeterminado estableciendo $enable-grid-classes: false y habilita el CSS Grid estableciendo $enable-cssgrid: true. Luego, recompila tu Sass.

• Reemplaza las instancias de .row con .grid. La clase .grid establece display: grid y crea un grid-template sobre el que construyes con tu HTML.

• Reemplaza las clases .col-* con clases .g-col-*. Esto se debe a que nuestras columnas de CSS Grid usan la propiedad grid-column en lugar de width.

• El tamaño de las columnas y los gutters se establece mediante variables CSS. Establécelas en el .grid padre y personalízalas como quieras, inline o en una hoja de estilos, con --bs-columns y --bs-gap.

En el futuro, Bootstrap probablemente cambiará a una solución híbrida ya que la propiedad gap ha logrado casi soporte completo en navegadores para Flexbox.

Diferencias clave

Comparado con el sistema de grid predeterminado:

• Las utilidades de flex no afectan a las columnas de CSS Grid de la misma manera.

• Los gaps reemplazan a los gutters. La propiedad gap reemplaza el padding horizontal de nuestro sistema de grid predeterminado y funciona más como margin.

• Como tal, a diferencia de los .rows, los .grids no tienen márgenes negativos y las utilidades de margin no se pueden usar para cambiar los gutters de la grid. Los gaps de la grid se aplican horizontal y verticalmente por defecto. Consulta la sección de personalización para más detalles.

• Los estilos inline y personalizados deben verse como reemplazos de las clases modificadoras (p. ej., style="--bs-columns: 3;" vs class="row-cols-3").

• El anidamiento funciona de manera similar, pero puede que necesites restablecer el conteo de columnas en cada instancia de un .grid anidado. Consulta la sección de anidamiento para más detalles.

Ejemplos

Tres columnas

Se pueden crear tres columnas de igual ancho en todos los viewports y dispositivos usando las clases .g-col-4. Añade clases responsivas para cambiar el layout según el tamaño del viewport.

<div class="grid text-center">
  <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>

Responsive

Usa clases responsivas para ajustar tu layout a través de los viewports. Aquí comenzamos con dos columnas en los viewports más estrechos, y luego crecemos a tres columnas en viewports medianos y superiores.

<div class="grid text-center">
  <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>

Compara eso con este layout de dos columnas en todos los viewports.

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

Ajuste

Los elementos de la grid automáticamente pasan a la siguiente línea cuando ya no hay más espacio horizontal. Ten en cuenta que el gap se aplica a los espacios horizontales y verticales entre los elementos de la grid.

<div class="grid text-center">
  <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>

Inicios

Las clases de inicio pretenden reemplazar las clases de offset de nuestro grid predeterminado, pero no son exactamente lo mismo. CSS Grid crea una plantilla de grid a través de estilos que le dicen a los navegadores que “comiencen en esta columna” y “terminen en esta columna.” Esas propiedades son grid-column-start y grid-column-end. Las clases de inicio son una abreviatura de la primera. Combínalas con las clases de columnas para dimensionar y alinear tus columnas como necesites. Las clases de inicio comienzan en 1 ya que 0 es un valor inválido para estas propiedades.

<div class="grid text-center">
  <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

Cuando no hay clases en los elementos de la grid (los hijos inmediatos de un .grid), cada elemento de la grid se dimensionará automáticamente a una columna.

<div class="grid text-center">
  <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 comportamiento se puede mezclar con clases de columnas de grid.

<div class="grid text-center">
  <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>

Anidamiento

Similar a nuestro sistema de grid predeterminado, nuestro CSS Grid permite el anidamiento fácil de .grids. Sin embargo, a diferencia del predeterminado, esta grid hereda los cambios en las filas, columnas y gaps. Considera el ejemplo siguiente:

• Sobrescribimos el número predeterminado de columnas con una variable CSS local: --bs-columns: 3.
• En la primera columna automática, el conteo de columnas se hereda y cada columna es un tercio del ancho disponible.
• En la segunda columna automática, hemos restablecido el conteo de columnas en el .grid anidado a 12 (nuestro valor predeterminado).
• La tercera columna automática no tiene contenido anidado.

En la práctica esto permite layouts más complejos y personalizados en comparación con nuestro sistema de grid predeterminado.

<div class="grid text-center" 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 el número de columnas, el número de filas, y el ancho de los gaps con variables CSS locales.

Estas variables CSS no tienen un valor predeterminado; en su lugar, aplican valores de respaldo que se usan hasta que se proporcione una instancia local. Por ejemplo, usamos var(--bs-rows, 1) para nuestras filas de CSS Grid, lo cual ignora --bs-rows porque aún no se ha establecido en ningún lugar. Una vez que se establezca, la instancia de .grid usará ese valor en lugar del valor de respaldo de 1.

Sin clases de grid

Los elementos hijos inmediatos de un .grid son elementos de la grid, así que se dimensionarán sin añadir explícitamente una clase .g-col.

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

Columnas y espacios

Ajusta el número de columnas y el gap.

<div class="grid text-center" 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 text-center" 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>

Añadir filas

Añadiendo más filas y cambiando la ubicación de las columnas:

<div class="grid text-center" 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>

Espacios

Cambia solo los gaps verticales modificando el row-gap. Ten en cuenta que usamos gap en los .grids, pero row-gap y column-gap se pueden modificar según sea necesario.

<div class="grid text-center" 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>

Debido a eso, puedes tener diferentes gaps verticales y horizontales, que pueden tomar un solo valor (todos los lados) o un par de valores (vertical y horizontal). Esto se puede aplicar con un estilo inline para gap, o con nuestra variable CSS --bs-gap.

<div class="grid text-center" 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

Una limitación del CSS Grid es que nuestras clases predeterminadas siguen siendo generadas por dos variables Sass, $grid-columns y $grid-gutter-width. Esto efectivamente predetermina el número de clases generadas en nuestro CSS compilado. Tienes dos opciones aquí:

• Modifica esas variables Sass predeterminadas y recompila tu CSS.
• Usa estilos inline o personalizados para aumentar las clases proporcionadas.

Por ejemplo, puedes aumentar el conteo de columnas y cambiar el tamaño del gap, y luego dimensionar tus “columnas” con una mezcla de estilos inline y clases predefinidas de columnas de CSS Grid (p. ej., .g-col-4).

<div class="grid text-center" 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>