Bordes redondeados (border-radius) Bordes redondeados en los vértices Sombras (box-shadow) Sombras múltiples (box-shadow) Sombras interiores Sombras con transparencias Sombras de texto Rotación Punto de origen Escalado Translación Torcer (transform:skew) Múltiples transformaciones en forma simultanea Opacidad (opacity) Opacidad (color) Múltiples columnas (column-count) Múltiples columnas dinámicas (column-width) Múltiples columnas y su separación (column-gap) Múltiples columnas y línea separadora (column-rule) Importar una fuente no disponible en el navegador (@font-face) Imágenes de fondo (background-image) Imágenes de fondo en diferentes posiciones (background-position) Imágenes de fondo (background-size) Imágenes de fondo (background-origin) Transiciones de una propiedad (transition) Transiciones de múltiples propiedades (transition) Transiciones (funciones de transición) Transiciones (tiempo de demora en iniciar la transición) Transiciones (otra sintaxis para hacer lo mismo) Animaciones (sintaxis básica) Animaciones (animation-iteration-count y animation-direction) Animaciones (animation-timing-function y animation-delay) Animaciones (animation-play-state) Animaciones (definición de más de 2 keyframes)

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%).

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,