CSS3 incorpora un grupo de propiedades para facilitar la creación de columnas dentro de una caja. Aplicando una simple regla, las palabras claves son: column-count, column-gap, column-rule.
column-count, declara el número de columnas.
column-gap, declara el espacio entre las columnas.
column-rule, especificamos las características de la línea que divide las columnas. La sintexis de esta es la misma que la propiedad border.
Ejemplo:
Código HTML.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Estilo ccs3</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header id="inicio">
<span id="titulo">Estilos CSS3</span>
<span id="titulo">HTML5</span>
</header>
</body>
</html>
Código CSS3.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 600px;
margin: 50px auto;
padding: 15px;
border: 2px solid #999999;
background: #54A831;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
-webkit-column-rule: 1px solid #000000;
-moz-column-rule: 1px solid #000000;
column-rule: 10px solid #000000;
}
#titulo{
font: bold 36px verdana, sans-serif;
}
Disponemos de otras propiedades para personalizar las columnas. Algunas de las más interesantes son: column-width y column-span.
column-width declara un anco específico para la columna, su valores pueden ser auto (por defecto) o un ancho en cualquier unidad válida de CSS.
column-span esta propiedad es aplicada a elementos dentro del la caja y determina si el elemento sera posicionado dentro de una columna o abarcará múltiples columnas. Los valors son all (todas las columnas), nome (por defecto).
