CSS Grid

El sistema de cuadrícula predeterminado de Bootstrap representa la culminación de más de una década de técnicas de diseño CSS, probadas por millones de personas. Pero también se creó sin muchas de las características y técnicas modernas de CSS que estamos viendo en los navegadores, como el nuevo CSS Grid.

Cómo funciona

Con Bootstrap 5, agregamos la opción de habilitar un sistema de cuadrícula separado que está construido sobre CSS Grid, pero con un toque de Bootstrap. Aún obtienes clases que puedes aplicar según tus preferencias para crear diseños responsivos, pero con un enfoque diferente bajo el capó.

• CSS Grid es de activación opcional (opt-in). Desactiva el sistema de cuadrícula predeterminado estableciendo $enable-grid-classes: false y activa 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.

• Los tamaños de las columnas y del canal (gutter) se establecen mediante variables CSS. Establécelos en el contenedor padre .grid y personalízalos como quieras, en línea o en una hoja de estilos, con --bs-columns and --bs-gap.

En el futuro, es probable que Bootstrap cambie a una solución híbrida ya que la propiedad gap ha logrado un soporte de navegador casi completo para flexbox.

Diferencias clave

En comparación con el sistema de cuadrícula predeterminado:

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

• Los espacios (gaps) reemplazan a los canales (gutters). La propiedad gap reemplaza el relleno (padding) horizontal de nuestro sistema de cuadrícula predeterminado y funciona más como un margen (margin).

• Como tal, a diferencia de los elementos .row, los elementos .grid no tienen márgenes negativos y no se pueden utilizar utilidades de margen para cambiar los canales de la cuadrícula. Los espacios de la cuadrícula se aplican horizontal y verticalmente de forma predeterminada. Consulta la sección de personalización para obtener más detalles.

• Los estilos en línea y personalizados deben considerarse reemplazos de las clases modificadoras (por ejemplo, style="--bs-columns: 3;" frente a class="row-cols-3").

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

Ejemplos

Tres columnas

Se pueden crear tres columnas de igual ancho en todas las ventanas gráficas y dispositivos usando las clases .g-col-4. Agrega clases responsivas para cambiar el diseño según el tamaño de la ventana gráfica.

<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>

Responsivo

Usa clases responsivas para ajustar tu diseño en las ventanas gráficas. Aquí comenzamos con dos columnas en las ventanas gráficas más estrechas, y luego crecemos a tres columnas en ventanas gráficas medianas 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 diseño de dos columnas en todas las ventanas gráficas.

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

Envoltura (Wrapping)

Los elementos de la cuadrícula se envuelven automáticamente en la siguiente línea cuando no hay más espacio horizontalmente. Ten en cuenta que gap se aplica a los espacios horizontales y verticales entre los elementos de la cuadrícula.

<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>

Puntos de inicio (Starts)

Las clases de inicio tienen como objetivo reemplazar las clases offset de nuestra cuadrícula predeterminada, pero no son completamente iguales. CSS Grid crea una plantilla de cuadrícula 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 columna para dimensionar y alinear tus columnas como necesites. Las clases de inicio comienzan en 1 ya que 0 es un valor no vá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 (Auto columns)

Cuando no hay clases en los elementos de la cuadrícula (los hijos inmediatos de un .grid), cada elemento de la cuadrícula 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 cuadrícula.

<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 (Nesting)

Al igual que nuestro sistema de cuadrícula predeterminado, nuestro CSS Grid permite anidar fácilmente elementos .grid. Sin embargo, a diferencia del predeterminado, este grid hereda cambios en las filas, columnas y espacios. Considera el siguiente ejemplo:

• Sobrescribimos el número predeterminado de columnas con una variable CSS local: --bs-columns: 3.
• En la primera columna automática, se hereda el recuento de columnas y cada columna ocupa un tercio del ancho disponible.
• En la segunda columna automática, restablecimos el recuento 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 diseños más complejos y personalizados en comparación con nuestro sistema de cuadrícula predeterminado.

<div class="grid text-center overflow-x-auto" style="--bs-columns: 3;">
  <div>
    Primera columna automática
    <div class="grid">
      <div>Columna automática</div>
      <div>Columna automática</div>
    </div>
  </div>
  <div>
    Segunda columna automática
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 de 12</div>
      <div class="g-col-4">4 de 12</div>
      <div class="g-col-2">2 de 12</div>
    </div>
  </div>
  <div>Tercera columna automática</div>
</div>

Personalización

Personaliza el número de columnas, the número de filas y el ancho de los espacios con variables CSS locales.

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

Sin clases de cuadrícula

Los elementos secundarios inmediatos de .grid son elementos de cuadrícula, por lo que cambiarán de tamaño sin agregar explícitamente una clase .g-col.

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Columna automática</div>
  <div>Columna automática</div>
  <div>Columna automática</div>
</div>

Columnas y espacios (gaps)

Ajusta el número de columnas y el espacio.

<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ñadir más filas y cambiar la ubicación de las columnas:

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Columna automática</div>
  <div class="g-start-2" style="grid-row: 2">Columna automática</div>
  <div class="g-start-3" style="grid-row: 3">Columna automática</div>
</div>

Espacios (Gaps)

Cambia los espacios verticales únicamente modificando row-gap. Ten en cuenta que usamos gap en los elementos .grid, 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 espacios (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 en línea 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 de CSS Grid es que nuestras clases predeterminadas todavía se generan mediante 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.
• Utiliza estilos en línea o personalizados para aumentar las clases proporcionadas.

Por ejemplo, puedes aumentar el recuento de columnas y cambiar el tamaño del espacio, y luego dimensionar tus "columnas" con una combinación de estilos en línea y clases de columna CSS Grid predefinidas (por ejemplo, .g-col-4).

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