¿Qué es el CSS Grid?
CSS Grid Layout es un sistema de maquetación bidimensional basado en cuadrículas que está específicamente diseñado para facilitar el trabajo de maquetación en CSS.
Antes solíamos maquetar nuestras páginas web utilizando tablas, float, luego posicionamiento e inline-block, pero todos estos métodos eran más bien hacks. Flexbox también es una buena herramienta de maquetación que mucha gente utiliza, pero es un flujo unidireccional y también tiene diferentes casos de uso. El CSS Grid es el primer módulo de estilo creado específicamente para resolver los problemas de maquetación.
Empecemos por añadir el CSS Grid al diseño, estoy haciendo un simple contenedor HTML:
<div class="container">
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet.</div>
</div>Ahora vamos a añadir el grid a nuestro diseño CSS:
.container {
display: grid;
grid-template-columns: 3fr 3fr;
grid-gap: 1rem;
}
.container div {
background: #eee;
padding: 1rem;
}
/* changed nth child color to tell the difference */
.container div:nth-child(odd) {
background: #ddd;
}Ahora esto nos dará la salida de 6 divs divididos en columnas que tienen 3fr (MDN define la unidad fr como una unidad que representa una fracción del espacio disponible en el contenedor de css grid). también puedes usar px o rem incluso % pero son fijos. de ahí que sea una mejor práctica usar fr.
grid-template-columns
.container {
grid-column-columns: 3fr 3fr;
}Especifica el número y la anchura de las columnas en un diseño de rejilla. en palabras sencillas más fr que vayas a añadir va a añadir más columnas y cambiar el valor de fr va a cambiar la anchura de la caja específica;
Ahora, en mi caso, he añadido 2fr con el valor de 3. entonces les dará un espacio igual de 3.
Si voy a aumentar el fr entonces va a crear más columnas. también puedes cambiar el valor para hacer una columna más grande que la otra.
grid-gap
Te estarás preguntando cómo estoy consiguiendo el espacio entre los espacios que he utilizado la propiedad grid-gap para el gap;
.container{
grid-gap: 1rem;
}grid-template-rows
Grid-template-rows también es lo mismo que hicimos para la columna, por ejemplo, añadí grid-template-rows junto con grid-template-row
.container {
display: grid;
grid-template-columns: 3fr 3fr;
grid-template-rows: 10fr 30fr 4fr;
grid-gap: 1rem;
}
También puedes utilizar repeat(valor, fr) para hacer las columnas o filas coherentes.
.container{
grid-template-columns: repeat(3, 1fr)
}Esto va a hacer 3 columnas de 1fr.
grid-auto-rows
- También podemos aumentar la altura de las cajas que utilizamos mediante la cuadrícula de filas automáticas.
- Por ejemplo, si quiero aumentar la altura en 10rem escribiré
.container {
display: grid;
grid-template-columns: repeat(3, 2fr);
grid-gap: 1rem;
grid-auto-rows: 10rem;
}
minmax()
Ahora si la haces coincidir con la imagen anterior a esta entonces vas a encontrar la diferencia entre la altura de las dos imágenes. si tienes un texto que es más que la altura que has dado entonces puedes usar minmax(), usamos esto para dar la altura mínima que necesitamos y luego podemos dar la altura máxima al para el elemento que también puede ser auto donde el navegador va a ajustar el texto dentro de la cuadrícula por sí mismo.
Mira, en este caso, el texto se sale de la caja, y debajo de la otra caja, añadamos mixmax() para solucionar este problema.
.container {
display: grid;
grid-template-columns: repeat(3, 2fr);
grid-gap: 1rem;
grid-auto-rows: minmax(10rem, auto);
}
justify-items, align-items & align-self, justify-self
Al igual que usamos justify-content y align-items en flex, también tenemos lo mismo en GRID, los llamamos justify-items, align-items. para ver esto puedes mirar las flex-properties, ambas hacen lo mismo.
Grid Column
Propiedad abreviada para [grid-column-start] y [grid-column-end].
grid-column: auto auto
El inicio y el final de la columna del elemento de la cuadrícula se establecen automáticamente.
grid-column: 1 / 3
El elemento de la cuadrícula comienza antes de la primera columna y termina justo antes de la tercera.
grid-column: span 3
El elemento de la cuadrícula abarca 3 columnas.
grid-column: 1 / span 4
Los elementos de la cuadrícula comienzan antes de la primera columna y se extienden por 4 columnas, creando una nueva en el proceso.
Lo mismo ocurre con las filas de la cuadrícula.
¡Gracias por leernos!
Si necesitas ayuda con HTML, CSS y Javascript puedes encontrarme en mi página web.
