Con la tecnología Grid es posible crear cuadrículas con un tamaño explícito. Para ello, sólo tenemos que usar las propiedades CSS grid-template-columns y grid-template-rows, que sirven para indicar las dimensiones de cada celda de la cuadrícula, diferenciando entre columnas y filas. Las propiedades son las siguientes.
| Propiedad | Valor | Descripción |
|---|---|---|
grid-template-columns | [col1] [col2] … | Establece el de cada columna (col 1, col 2…). |
grid-template-rows | [fila1] [fila2] … | Establece el de cada fila (fila 1, fila 2…). |
Conociendo estas dos propiedades, asumamos el siguiente código CSS.
Ejm
.grid {
display: grid;
grid-template-columns: 100px 300px;
grid-template-rows: 200px 100px;
}El código de arriba se traduce en que tenemos una cuadricula con 2 columnas (la primera con 100px de ancho y la segunda con 300px de ancho) y con 2 filas (la primera con 200px de alto y la segunda con 100px de alto). Ahora, dependiendo del número de ítems (elementos hijos) que tenga el contenedor grid, tendremos una cuadrícula de 2×2 elementos (4 ítems), 2×3 elementos (6 ítems), 2×4 elementos (8 ítems) y así sucesivamente. Si el número de ítems es impar, la última celda de la cuadrícula se quedará vacía.
A medida que vamos incluyendo más ítems en el grid, podemos aumentar también el número de parámetros de grid-template-columns y/o grid-template-rows. Ten en cuenta que en este caso, tenemos dos valores en cada propiedad (2×2), lo que hacen una cuadrícula de 4 elementos, que es justo el número de ítems en el HTML.
En caso de tener más ítems de lo que se indica en la propiedad, los ítems restantes se incluirían sin formato. De tener menos, simplemente se ocuparían los ítems implicados.