grid-column-gap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.

La propiedad CSSgrid-column-gap especifica elgutter entregrid columns.

css

/* <length> values */grid-column-gap: 20px;grid-column-gap: 1em;grid-column-gap: 3vmin;grid-column-gap: 0.5cm;/* <percentage> value */grid-column-gap: 10%;/* Global values */grid-column-gap: inherit;grid-column-gap: initial;grid-column-gap: unset;

El efecto es como si lasgrid lines afectadas adquieren una anchura específica: Losgrid track entre dos líneas de la cuadrícula es el espacio entre los canales que las representa. Para el tamaño de la pista, cada canal se trata esencialmente como una pista adicional del tamaño especificado. Los valores negativos no son válidos.

Valor inicial	`normal`
Applies to	multi-column elements, flex containers, grid containers
Heredable	no
Percentages	refer to corresponding dimension of the content area
Valor calculado	as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation type	alength,percentage or calc();

Syntax

Valores

<length-percentage>: Es el ancho del canal que separa las columnas de la grilla.<percentage> valores son relativos a la dimensión del elemento.

Sintaxis formal

column-gap =
normal|
<length-percentage [0,∞]>

<length-percentage> =
<length>|
<percentage>

Ejemplo

HTML

html

<div>  <div></div>  <div></div>  <div></div></div>

CSS

css

#grid {  display: grid;  height: 100px;  grid-template-columns: repeat(3, 1fr);  grid-template-rows: 100px;  grid-column-gap: 20px;}#grid > div {  background-color: lime;}