Montar una retícula con CSS Grid nos da un gran potencial para maquetar estructuras complejas que hace un tiempo suponían cierta complejidad, cómo por ejemplo una galería, un portafolio e incluso la estructura general de un sitio web. En este artículo vamos a ver su funcionamiento básico. Lo único que tienes que tener en cuenta es qué es un sistema bastante moderno, por lo que algunos navegadores antiguos no lo soportan. A continuación tienes una tabla donde puedes ver las compatibilidades.
Navegadores que soportan CSS Grid:
Google Chrome 57.0
Firefox 52.0
Safari 10
Opera 44
Edge 16.0
CSS Grid, retícula básica
El HTML para montar la retícula CSS Grid consta de un div contenedor que alberga celdas en su interior cómo puedes ver de forma simple en el siguiente ejemplo:
<div class="grid-container"> <div>Columna 1</div> <div>Columna 2</div> <div>Columna 3</div> <div>Columna 4</div> <div>Columna 5</div> <div>Columna 6</div> </div>
.grid-container{
display: grid;
grid-gap: 5px;
grid-template-columns: 1fr 1fr 1fr;
}El contenedor tiene tres propiedades básicas:
- Display Grid: necesario para CSS Grid
- Grid Gap: espacio entre columnas opcional
- Grid Template Columns: determina el número de columnas, en este caso hay 3 y su anchura se reparte de forma automática a partes iguales.
Y el resultado sería el siguiente:
CSS Grid, columnas desiguales
En el ejemplo anterior, la propiedad grid-template-columns se ha definido en auto. Vamos a crear ahora columnas desiguales; la primera ocupará el 30% y la segunda ocupará el resto del espacio.
<div class="grid-container"> <div>Columna 1</div> <div>Columna 2</div> <div>Columna 3</div> <div>Columna 4</div> <div>Columna 5</div> <div>Columna 6</div> </div>
.grid-container{
display: grid;
grid-gap: 5px;
grid-template-columns: auto 30%;
}CSS Grid, cuadrícula destacada
Vamos ahora a dar un paso mas allá, que es destacar una cuadrícula. En este caso tenemos que añadir una clase a un elemento «hijo» del grid container para poder aplicar estilos individualizados.
<div class="grid-container"> <div class="grid-item-destacado">Columna 1</div> <div>Columna 2</div> <div>Columna 3</div> <div>Columna 4</div> </div>
.grid-container{
display: grid;
grid-gap: 5px;
grid-template-columns: 1fr 1fr 1fr;
}
.grid-item-destacado{
grid-column-start: 1;
grid-column-end: 4;
}Como puedes ver, aquí estamos trabajando con dos nuevas propiedades:
- Grid column start: define dónde empieza el grid-item-1
- Grid column end: define dónde acaba el grid-item-1
El resultado sería el siguiente:
A continuación, con un HTML parecido al ejemplo anterior pero cambiando el grid-column-end de la cuadricula destacada a 3.
.grid-item-destacado{
grid-column-start: 1;
grid-column-end: 3;
}Ya hemos visto lo básico de CSS Grid y cómo puedes comprobar permite montar muchas estructuras de forma sencilla y sin complicaciones. Pero el potencial de este sistema es mucho más grande. Si quieres profundizar, te recomiendo que visites la página web w3schools, dónde podrás ver todo lo que se puede hacer con CSS Grid.
