Definición de .gap utilizado en CSS
La propiedad .gap en CSS es una taquigrafía para la fila-.gap y la columna-.gap, que especifica el tamaño de las canaletas, que es el espacio entre filas y columnas dentro de la cuadrícula, flexión y diseño de múltiples columnas.
Ejemplo de empleo de gap
Esta propiedad de CSS habitualmente se utiliza de esta forma:
/* Grid layout */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 2fr 1fr;
gap: 30px 20px;
}
/* Flex layout */
.container {
display: flex;
gap: 10%;
}
/* Multi-column layout */
.container {
column-count: 5;
gap: 20px;
}Otro ejemplo más avanzado de .gap es el siguiente de CODEPEN:
Sintaxis de .gap en CSS
gap: row-gap column-gap;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| Establece el tamaño del espacio entre las filas en un diseño de cuadrícula | ||
| Establece el tamaño del espacio entre las columnas en un diseño de cuadrícula |
Exploradores compatibles con .gap
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| grid | 57 | 16 | 52 | 10 | 44 |
Bibliografía
- CSS Box Alignment Module Level 3
- Chromium lands Flexbox gap (Ticket #761904)
- WebKit CSS Feature Status
- Grid Layout
- Flexbox Layout
- Multi-Column Layout
