Definición de .column-gap en CSS
La propiedad CSS .column-gap establece el espacio (también llamado «canaletas») entre columnas en diseños de columnas CSS Grid, FlexBox y CSS.
Ejemplo de uso : propiedad CSS column-gap
Si quieres emplear esta propiedad de CSS en tu hoja de estilos, hazlo de la siguiente forma:
.something {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 25px;
column-gap: 25px;
}Otro ejemplo más avanzado de .column-gap es el siguiente de CODEPEN:
Sintaxis de .column-gap en CSS
column-gap: length|normal|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| longitud | Una longitud especificada que establecerá el espacio entre las columnas. | |
| normal | Valor por defecto. Especifica un espacio normal entre las columnas. W3C sugiere un valor de 1em | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .column-gap
Los números de la tabla especifican la primera versión del navegador que es absolutamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| column-rule | 50.0 4.0 -webkit- | 10.0 | 52.0 2.0 -moz- | 9.0 3.1 -webkit- | 37.0 15.0 -webkit 11.1 |
