Cuadrícula CSS

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 de CSS, probadas por millones de personas. Pero también se creó sin muchas de las funciones y técnicas modernas de CSS que vemos en navegadores como el nuevo CSS Grid.

Cómo funciona

Con Bootstrap 5, agregamos la opción para habilitar un sistema de cuadrícula separado que se basa en CSS Grid, pero con un toque de Bootstrap. Todavía recibe clases que puede aplicar por capricho para crear diseños receptivos, pero con un enfoque diferente bajo el capó.

• CSS Grid es opcional. Deshabilite el sistema de cuadrícula predeterminado configurando $enable-grid-classes: falsey habilite CSS Grid configurando $enable-cssgrid: true. Luego, vuelva a compilar su Sass.

• Reemplace las instancias de .rowcon .grid. La .gridclase establece display: gridy crea un grid-templatearchivo sobre el que se construye con su HTML.

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

• Las columnas y los tamaños de medianil se establecen a través de variables CSS. Configúrelos en el padre .gridy personalícelos como desee, en línea o en una hoja de estilo, con --bs-columnsy --bs-gap.

En el futuro, es probable que Bootstrap cambie a una solución híbrida, ya que la gappropiedad ha logrado una compatibilidad casi total del navegador para flexbox.

Diferencias clave

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

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

• Los huecos reemplazan las canaletas. La gappropiedad reemplaza la horizontal paddingde nuestro sistema de cuadrícula predeterminado y funciona más como margin.

• Como tal, a diferencia .rowde s, .grids no tiene márgenes negativos y las utilidades de margen no se pueden usar para cambiar los canalones de la cuadrícula. Los espacios de cuadrícula se aplican horizontal y verticalmente de forma predeterminada. Consulte la sección de personalización para obtener más detalles.

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

• El anidamiento funciona de manera similar, pero es posible que deba restablecer los recuentos de columnas en cada instancia de un archivo anidado .grid. Vea la sección de anidamiento para más detalles.

Ejemplos

tres columnas

Se pueden crear tres columnas de igual ancho en todas las ventanas gráficas y dispositivos mediante el uso de las .g-col-4clases. Agregue clases receptivas 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>

Sensible

Use clases receptivas para ajustar su diseño en las ventanas gráficas. Aquí comenzamos con dos columnas en las ventanas más estrechas y luego crecemos a tres columnas en las ventanas 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>

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

Envase

Los elementos de la cuadrícula se ajustan automáticamente a la siguiente línea cuando no hay más espacio horizontalmente. Tenga en cuenta que gapse 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>

Empieza

Las clases de inicio tienen como objetivo reemplazar las clases de desplazamiento de nuestra cuadrícula predeterminada, pero no son del todo 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 "finalicen en esta columna". Esas propiedades son grid-column-starty grid-column-end. Las clases de inicio son una forma abreviada de lo primero. Combínalos con las clases de columnas para dimensionar y alinear tus columnas como lo necesites. Las clases de inicio comienzan en 1como 0es 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

Cuando no hay clases en los elementos de la cuadrícula (los elementos secundarios inmediatos de a .grid), cada elemento de la cuadrícula se dimensionará automáticamente en 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 combinar con clases de columna 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

Similar a nuestro sistema de cuadrícula predeterminado, nuestra CSS Grid permite anidar fácilmente .grids. Sin embargo, a diferencia de la predeterminada, esta cuadrícula hereda los cambios en las filas, columnas y espacios. Considere el siguiente ejemplo:

• Anulamos el número predeterminado de columnas con una variable CSS local: --bs-columns: 3.
• En la primera columna automática, el recuento de columnas se hereda y cada columna tiene un tercio del ancho disponible.
• En la segunda columna automática, hemos restablecido el recuento de columnas en el anidado .grida 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" 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 espacios con variables CSS locales.

Estas variables CSS no tienen un valor predeterminado; en su lugar, aplican valores alternativos que se usan hasta que se proporciona una instancia local. Por ejemplo, usamos var(--bs-rows, 1)para nuestras filas de CSS Grid, que se ignora --bs-rowsporque aún no se ha configurado en ningún lado. Una vez que lo esté, la .gridinstancia usará ese valor en lugar del valor alternativo de 1.

Sin clases de cuadrícula

Los elementos secundarios inmediatos de .gridson elementos de cuadrícula, por lo que se dimensionarán sin agregar explícitamente una .g-colclase.

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

columnas y huecos

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

Agregar filas

Agregar más filas y cambiar 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>

Brechas

Cambie los espacios verticales solo modificando el archivo row-gap. Tenga en cuenta que usamos gapon .grids, pero row-gapy column-gappuede modificarse 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>

Por eso, puedes tener diferentes verticales y horizontales gap, 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 gapo con nuestra --bs-gapvariable CSS.

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

Hablar con descaro a

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

• Modifique esas variables Sass predeterminadas y vuelva a compilar su CSS.
• Utilice estilos en línea o personalizados para aumentar las clases proporcionadas.

Por ejemplo, puede aumentar el número de columnas y cambiar el tamaño del espacio, y luego dimensionar sus "columnas" con una combinación de estilos en línea y clases de columna de CSS Grid predefinidas (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>