CSS Grid Layout es una herramienta de Bricks Builder que te permite crear diseños de cuadrícula bidimensionales, es decir, con columnas y filas. A diferencia de CSS flex, que se utiliza para diseños unidimensionales, CSS Grid te permite crear diseños más complejos.
Para empezar a crear un diseño de cuadrícula, necesitas convertir un elemento HTML en un contenedor de cuadrícula. Puedes hacer esto aplicando la propiedad CSS «display: grid» al elemento. Este elemento se convierte en el contenedor de la cuadrícula.
Dentro del contenedor de cuadrícula, cada elemento hijo directo se convierte en un ítem de cuadrícula. Puedes ajustar la posición de estos ítems dentro de la cuadrícula estableciendo propiedades de columna y fila para cada uno.
Al editar el contenedor de cuadrícula, puedes activar una superposición de cuadrícula que muestra las celdas de la cuadrícula. Esto te ayuda a visualizar y ajustar la ubicación de los ítems dentro de la cuadrícula.
Cómo definir las columnas y filas de la cuadrícula
Una vez que has creado el contenedor de cuadrícula, es hora de definir las columnas y filas de la cuadrícula. Puedes hacer esto utilizando las propiedades «grid-template-columns» y «grid-template-rows» del contenedor de cuadrícula.
Por ejemplo, puedes definir tres columnas con diferentes anchos utilizando la propiedad «grid-template-columns». Puedes especificar valores fijos en píxeles o unidades flexibles llamadas «fr«. Por ejemplo, «1fr» significa que la columna ocupará una fracción del espacio disponible.
Si quieres definir las filas, puedes utilizar la propiedad «grid-template-rows» de manera similar. Puedes especificar alturas fijas en píxeles o utilizar «fr» para definir fracciones del espacio disponible.
Si solo defines explícitamente algunas columnas o filas y dejas otras sin definir, se generarán automáticamente columnas y filas implícitas para los ítems de cuadrícula restantes.
También puedes establecer tamaños mínimos y máximos para las columnas y filas utilizando la función «min max». Esta función acepta dos argumentos: el valor mínimo y el valor máximo de la pista de cuadrícula. Por ejemplo, puedes establecer un ancho mínimo de 200px y un ancho máximo de «1fr» para una columna.
Para hacer que tu diseño de cuadrícula sea responsive, puedes utilizar las palabras clave «auto-fill» o «auto-fit» en lugar de especificar un número fijo de columnas. Estas palabras clave ajustarán automáticamente el número de columnas para llenar el espacio disponible.
La función «repeat»
Además, la función «repeat» te permite definir un patrón repetido de tamaño de columna o fila en un formato compacto. Puedes especificar cuántas veces se debe repetir el patrón y la definición de las pistas.
Por ejemplo, para crear una cuadrícula de 3 columnas que repita los elementos internos en las filas que necesite podrías poner en grid-template-columns:
1fr 1fr 1fr;
Pero con la función «repeat» quedaría así:
repeat(3, 1fr)
La función repeat toma dos argumentos: el primero especifica el número de veces que se debe repetir el patrón y el segundo es la definición de las pistas. En este caso, estamos repitiendo el patrón «1fr» tres veces para crear tres columnas de igual tamaño.
Utilizar repeat con la función 1fr simplifica la declaración y evita repetir el valor 1fr tres veces.
En este caso, «1fr» significa que cada columna ocupará una fracción igual del espacio disponible, dividiendo el ancho en tres partes iguales.
Para colocar los ítems de cuadrícula dentro de la cuadrícula, puedes utilizar las propiedades «grid-column» y «grid-row». Puedes especificar el número de línea de inicio y de fin para cada ítem. También puedes utilizar la palabra clave «span» para indicar cuántas columnas o filas debe abarcar un ítem.
Estas son solo algunas nociones básicas sobre CSS Grid Layout. Espero que este tutorial te sea útil. Si tienes más preguntas, no dudes en hacerlas.
