LM | DÍA 22: COLUMNAS EN CSS

Día 22. En el día de hoy hemos aprendido sobre el uso de una nueva propiedad CSS. Se trata de las propiedad column, lo que nos permitirá hacer columnas y añadirle aspectos como la anchura de columnas, delineado entre columnas, entre otras cosas. 

Derechos de autor aquí

Veamos las diferentes propiedades CSS que presentan las columnas:

• Column-count: establece el número de columnas a mostrar. El navegador distribuye el espacio disponible para acomodar el número de columnas solicitadas. 
• Column-width: establece el ancho de las columnas. El navegador muestra el número de columnas que quepan en el espacio disponible. 
• Column-gap: establece el tamaño del espacio entre columnas. El navegador distribuye el espacio disponible para acomodar el número de columnas solicitadas. 
• Column-rule: requiere tres valores, el color, el grosor y el estilo de borde, como en el caso de los bordes de los elementos. 
• Column-span: permite que un elemento se extienda a lo largo de varias columnas. Esta propiead puede tomar los valores none y all. 

Veamos un ejemplo de las propiedad de columnas. 

Código:

Captura realizada por el autor de este blog

Resultado: 

Captura realizada por el autor de este blog

Como vemos, tenemos diferentes propiedades CSS de column para trabajar diferentes aspectos como es el número de columnas, si habrá o no línea entre columnas (y tratar también el color, el grosor, etc.), o el ancho de las columnas.