Columnas múltiples

Empezaremos escribiendo en nuestro editor favorito el siguiente listado HTML, al que llamaremos por ejemplo, index.html.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a lectus nec felis bibendum bibendum quis nec dolor. Etiam dignissim elit quis leo posuere et viverra mauris tristique. Vestibulum lacinia sapien a purus bibendum iaculis nec vitae sapien. Quisque hendrerit, leo quis pellentesque scelerisque, ipsum ligula luctus purus, ut viverra dolor mi et orci. Donec feugiat cursus consectetur. Nunc scelerisque, nisl sed feugiat faucibus, sem augue dapibus erat, congue lobortis diam dolor ac ligula. Suspendisse fringilla lacus ut mi accumsan quis commodo sapien aliquam. Donec sapien nulla, placerat quis ullamcorper sed, rhoncus non lectus. Ut a dui in magna lacinia mattis ut et leo. Nullam malesuada pellentesque est et dictum. Vivamus ac erat vel augue facilisis rhoncus. Cras quis augue ut purus ullamcorper mollis.

NOTA: Con el fín de no haceros sufrir escribiendo el famoso Loren ipsum lo he pegado como texto, solo tendreís que copiar y pegar. Gracias.

Continuamos…

Hacemos clic derecho con el ratón sobre la fotografía y la guardamos en la carpeta donde vamos a guardar el listado HTML y CSS.

Por último creamos un nuevo archivo donde irá nuestra regla CSS para hacer las columnas múltiples:

Desglosando:

  • colum-count.- Permite definir el número de columnas con que debe mostrar el contenido dentro de un elemento.
  • column-gap.- Esta propiedad sirve para definir un espacio de separación entre columnas.

  • Crea tu artículo a tres columnas, a cuatro y a 2 columnas.
  • Cambia el titular a tu gusto a razón de la imagen que quieras colocar.

 

Anuncios