5.1 Introducción a las columnas
Con HTML5 y CSS3 se pueden crear textos en columnas de una manera muy sencilla, pudiendo configurar tanto el espacio existente entre las columnas como las líneas de separación entre columnas.
5.2 Propiedades columnas
En esta sección veremos las diferentes propiedades de las columnas.
column-count
Esta propiedad divide en contenido en la cantidad de columnas que le indiquemos. Por defecto siempre es 1.
En el siguiente ejemplo, vamos a dividir el texto en 3 columnas:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec rutrum lectus. Sed gravida gravida maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dignissim viverra orci id molestie. In hac habitasse platea dictumst. Fusce in odio id lorem venenatis consequat. Vestibulum venenatis sollicitudin diam, in interdum augue pretium id. Sed euismod ante eget volutpat euismod.Fusce egestas mauris et accumsan convallis. Phasellus tempus urna ut venenatis varius. Donec sodales, sem lobortis faucibus faucibus, ipsum metus faucibus sem, in aliquam erat ante id lacus. Vivamus tempor volutpat metus, a blandit velit euismod hendrerit. Mauris et massa nisi. Quisque euismod eu neque quis ultrices. Curabitur viverra et ante eu blandit. Nam sit amet eros venenatis nisl porttitor dignissim vel vitae ipsum. Suspendisse rutrum, diam in suscipit convallis, arcu erat condimentum arcu, id accumsan lacus ipsum nec urna. Morbi ornare imperdiet odio, nec dignissim purus sagittis sed. Vestibulum justo elit, consequat nec turpis at, bibendum blandit neque. Morbi sit amet magna in felis consectetur placerat at eu dolor. Fusce dui nulla, tristique sed justo sit amet, cursus rutrum magna.
column-gap
Esta propiedad define el espacio que habrá entre cada una de las columnas.
En el siguiente ejemplo vamos a dejar un espacio de 40px entre cada una de las columnas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec rutrum lectus. Sed gravida gravida maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dignissim viverra orci id molestie. In hac habitasse platea dictumst. Fusce in odio id lorem venenatis consequat. Vestibulum venenatis sollicitudin diam, in interdum augue pretium id. Sed euismod ante eget volutpat euismod.Fusce egestas mauris et accumsan convallis. Phasellus tempus urna ut venenatis varius. Donec sodales, sem lobortis faucibus faucibus, ipsum metus faucibus sem, in aliquam erat ante id lacus. Vivamus tempor volutpat metus, a blandit velit euismod hendrerit. Mauris et massa nisi. Quisque euismod eu neque quis ultrices. Curabitur viverra et ante eu blandit. Nam sit amet eros venenatis nisl porttitor dignissim vel vitae ipsum. Suspendisse rutrum, diam in suscipit convallis, arcu erat condimentum arcu, id accumsan lacus ipsum nec urna. Morbi ornare imperdiet odio, nec dignissim purus sagittis sed. Vestibulum justo elit, consequat nec turpis at, bibendum blandit neque. Morbi sit amet magna in felis consectetur placerat at eu dolor. Fusce dui nulla, tristique sed justo sit amet, cursus rutrum magna.
column-rule-style
Esta propiedad especifica el estilo de la línea de separación entre columnas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec rutrum lectus. Sed gravida gravida maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dignissim viverra orci id molestie. In hac habitasse platea dictumst. Fusce in odio id lorem venenatis consequat. Vestibulum venenatis sollicitudin diam, in interdum augue pretium id. Sed euismod ante eget volutpat euismod.Fusce egestas mauris et accumsan convallis. Phasellus tempus urna ut venenatis varius. Donec sodales, sem lobortis faucibus faucibus, ipsum metus faucibus sem, in aliquam erat ante id lacus. Vivamus tempor volutpat metus, a blandit velit euismod hendrerit. Mauris et massa nisi. Quisque euismod eu neque quis ultrices. Curabitur viverra et ante eu blandit. Nam sit amet eros venenatis nisl porttitor dignissim vel vitae ipsum. Suspendisse rutrum, diam in suscipit convallis, arcu erat condimentum arcu, id accumsan lacus ipsum nec urna. Morbi ornare imperdiet odio, nec dignissim purus sagittis sed. Vestibulum justo elit, consequat nec turpis at, bibendum blandit neque. Morbi sit amet magna in felis consectetur placerat at eu dolor. Fusce dui nulla, tristique sed justo sit amet, cursus rutrum magna.
column-rule-width
Esta propiedad especifica el ancho de la línea de separación entre columnas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec rutrum lectus. Sed gravida gravida maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dignissim viverra orci id molestie. In hac habitasse platea dictumst. Fusce in odio id lorem venenatis consequat. Vestibulum venenatis sollicitudin diam, in interdum augue pretium id. Sed euismod ante eget volutpat euismod.Fusce egestas mauris et accumsan convallis. Phasellus tempus urna ut venenatis varius. Donec sodales, sem lobortis faucibus faucibus, ipsum metus faucibus sem, in aliquam erat ante id lacus. Vivamus tempor volutpat metus, a blandit velit euismod hendrerit. Mauris et massa nisi. Quisque euismod eu neque quis ultrices. Curabitur viverra et ante eu blandit. Nam sit amet eros venenatis nisl porttitor dignissim vel vitae ipsum. Suspendisse rutrum, diam in suscipit convallis, arcu erat condimentum arcu, id accumsan lacus ipsum nec urna. Morbi ornare imperdiet odio, nec dignissim purus sagittis sed. Vestibulum justo elit, consequat nec turpis at, bibendum blandit neque. Morbi sit amet magna in felis consectetur placerat at eu dolor. Fusce dui nulla, tristique sed justo sit amet, cursus rutrum magna.
column-rule-color
Esta propiedad especifica el color de la separación entre columnas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec rutrum lectus. Sed gravida gravida maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dignissim viverra orci id molestie. In hac habitasse platea dictumst. Fusce in odio id lorem venenatis consequat. Vestibulum venenatis sollicitudin diam, in interdum augue pretium id. Sed euismod ante eget volutpat euismod.Fusce egestas mauris et accumsan convallis. Phasellus tempus urna ut venenatis varius. Donec sodales, sem lobortis faucibus faucibus, ipsum metus faucibus sem, in aliquam erat ante id lacus. Vivamus tempor volutpat metus, a blandit velit euismod hendrerit. Mauris et massa nisi. Quisque euismod eu neque quis ultrices. Curabitur viverra et ante eu blandit. Nam sit amet eros venenatis nisl porttitor dignissim vel vitae ipsum. Suspendisse rutrum, diam in suscipit convallis, arcu erat condimentum arcu, id accumsan lacus ipsum nec urna. Morbi ornare imperdiet odio, nec dignissim purus sagittis sed. Vestibulum justo elit, consequat nec turpis at, bibendum blandit neque. Morbi sit amet magna in felis consectetur placerat at eu dolor. Fusce dui nulla, tristique sed justo sit amet, cursus rutrum magna.
column-span
Esta propiedad define la cantidad de columnas usa un elemento. Esta propiedad es muy usada por los títulos. Siempre por defecto, un elemento tiene un span de 1.
En este ejemplo, podemos ver que el h2 ocupa todas las columnas gracias a la propiedad column-span: all.
Titulo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec rutrum lectus. Sed gravida gravida maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dignissim viverra orci id molestie. In hac habitasse platea dictumst. Fusce in odio id lorem venenatis consequat. Vestibulum venenatis sollicitudin diam, in interdum augue pretium id. Sed euismod ante eget volutpat euismod.Fusce egestas mauris et accumsan convallis. Phasellus tempus urna ut venenatis varius. Donec sodales, sem lobortis faucibus faucibus, ipsum metus faucibus sem, in aliquam erat ante id lacus. Vivamus tempor volutpat metus, a blandit velit euismod hendrerit. Mauris et massa nisi. Quisque euismod eu neque quis ultrices. Curabitur viverra et ante eu blandit. Nam sit amet eros venenatis nisl porttitor dignissim vel vitae ipsum. Suspendisse rutrum, diam in suscipit convallis, arcu erat condimentum arcu, id accumsan lacus ipsum nec urna. Morbi ornare imperdiet odio, nec dignissim purus sagittis sed. Vestibulum justo elit, consequat nec turpis at, bibendum blandit neque. Morbi sit amet magna in felis consectetur placerat at eu dolor. Fusce dui nulla, tristique sed justo sit amet, cursus rutrum magna.column-width
Esta propiedad define el tamaño que tiene cada una de las columnas.
En el siguiente ejemplo vamos a ajustar un tamaño de 40px a cada columna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec rutrum lectus. Sed gravida gravida maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dignissim viverra orci id molestie. In hac habitasse platea dictumst. Fusce in odio id lorem venenatis consequat. Vestibulum venenatis sollicitudin diam, in interdum augue pretium id. Sed euismod ante eget volutpat euismod.Fusce egestas mauris et accumsan convallis. Phasellus tempus urna ut venenatis varius. Donec sodales, sem lobortis faucibus faucibus, ipsum metus faucibus sem, in aliquam erat ante id lacus. Vivamus tempor volutpat metus, a blandit velit euismod hendrerit. Mauris et massa nisi. Quisque euismod eu neque quis ultrices. Curabitur viverra et ante eu blandit. Nam sit amet eros venenatis nisl porttitor dignissim vel vitae ipsum. Suspendisse rutrum, diam in suscipit convallis, arcu erat condimentum arcu, id accumsan lacus ipsum nec urna. Morbi ornare imperdiet odio, nec dignissim purus sagittis sed. Vestibulum justo elit, consequat nec turpis at, bibendum blandit neque. Morbi sit amet magna in felis consectetur placerat at eu dolor. Fusce dui nulla, tristique sed justo sit amet, cursus rutrum magna.