Múltiples columnas y su separación (column-gap)

La column-gappropiedad CSS establece el espacio (también llamado "medianiles") entre columnas en diseños de CSS Grid, Flexbox y CSS Columns.

Esa sintaxis formal básicamente dice column-gapque acepta un normalvalor (que es el predeterminado) o un valor de longitud que se especifica como una unidad (por ejemplo, 25px o 1.25em) o un porcentaje (por ejemplo, 10%).

column-gap


La propiedad  column-gap especifica el espacio entre las columnas.

Nota: Si hay una regla de columna entre columnas, aparecerá en el medio del espacio.

Ver en el siguiente ejemplo el funcionamiento

Podemos utilizar cualquier unidad para indicar la separación entre columnas (px, em etc.)

Si queremos una separación de 40 píeles entre columnas luego debemos codificar:

#recuadro1{
-moz-column-gap:40px;
-webkit-column-gap:40px;
column-gap:40px;
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
border-radius: 20px;
background-color:coral;
width:600px;
padding:10px;
}

El código anterior se verá así:

Recuadro 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,