Por defecto, la cuadrícula tiene todas sus celdas pegadas a sus celdas contiguas. Aunque sería posible darle un margin a las celdas dentro del contenedor, existe una forma más apropiada, que evita los problemas clásicos de los modelos de caja: los huecos (gutters).
Para especificar los huecos (espacio entre celdas) podemos utilizar las propiedades column-gap y/o row-gap. En ellas indicaremos el tamaño de dichos huecos.
| Propiedad | Descripción |
|---|---|
column-gap |
Establece el de los huecos entre columnas (líneas verticales). |
row-gap |
Establece el de los huecos entre filas (líneas horizontales). |
Cojamos el ejm del capítulo anterior. En él, le indicamos estas propiedades para colocar huecos entre las celdas de la cuadrícula. El código a añadir al ejemplo anterior sería el siguiente:
Ejm
.grid {
column-gap: 100px;
row-gap: 10px;
}
Con este código, obtenemos un resultado como el siguiente, indicando huecos entre columnas de 100px y huecos entre filas de 10px.
Atajo: Grid con huecos
Existe una propiedad de atajo para las propiedades column-gap y row-gap, permitiéndonos la posibilidad de no tener que indicarlas por separado.
La propiedad en cuestión sería gap y se utilizaría de la siguiente forma.
Ejm
.grid {
/* gap: <row-gap> <column-gap> */
gap: 20px 80px;
/* Equivalente a gap: 40px 40px; */
/* gap: <rowcolumn-gap> */
gap: 40px;
}
Nota: Antiguamente, las propiedades
column-gap,row-gapygaperan conocidas comogrid-column-gap,grid-row-gapygrid-gap, por lo que aún se puede encontrar información obsoleta que las mencione. Hoy en día deberías utilizar las tres primeras en su lugar.