CSS gapPropiedad
Ejemplo
Establece el espacio entre filas y columnas de la cuadrícula:
.grid-container {
gap: 50px;
}
Pruébalo »
Soporte del navegador
Los números de la tabla indican la primera versión del navegador que admite la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| gap (en columnas múltiples) | 66 | 16 | 61 | Not supported | 53 |
| gap (en cuadrícula) | 66 | 16 | 61 | 10.1 | 53 |
| gap (en flexbox) | 84 | 84 | 63 | Not supported | 70 |
Definición de la propiedad e instrucciones de uso
La propiedad gap se utiliza para establecer el espacio entre filas y columnas de la cuadrícula. Esta propiedad es una forma abreviada de row-gap y column-gap.
Nota:El diseño de cuadrícula CSS se definía inicialmente con la propiedad grid-gap, que actualmente está siendo reemplazada gradualmente por gap.
| Valor predeterminado: | normal normal |
|---|---|
| Herencia: | no |
| Versión: | CSS3 |
| Sintaxis de JavaScript: | object.style.gap="50px 100px" |
Sintaxis
gap: row-gap column-gap;
| Valor | Descripción |
|---|---|
| row-gap | Establece el tamaño del espacio entre filas en el diseño de cuadrícula |
| column-gap | Establece el tamaño del espacio entre columnas en el diseño de cuadrícula |
Más ejemplos
Ejemplo
Establece el espacio entre filas en 20px y el espacio entre columnas en 50px:
.grid-container {
gap: 20px 50px;
}
Pruébalo »
Artículos relacionados
Tutorial de CSS:Diseño de cuadrícula CSS
Manual de referencia de CSS:row-gapPropiedad
Manual de referencia de CSS:column-gapPropiedad
Otras extensiones