Aplicando multiplas colunas:
O layout CSS de várias colunas permite fácil definição de várias colunas de texto.
- column-count
- column-gap
- column-rule-style
- column-rule-width
- column-rule-color
- column-rule
- column-span
- column-width
Imagine que você tivesse que distribuir todo o texto abaixo em 3 colunas.
Usando column-count você pode definir a quantidade de colunas, sem escrever muito código.
Lorem ipsum dolor sit amet, consecteteur adipiscing elit metus lacus urna a.
Pede platea malesuada molestie id sit curabitur justo nibh.
Nec mi sollicitudin natoque, elementum inceptos. Duis purus tellus augue habitant duis, hac quis parturient.
Fusce parturient scelerisque ligula. Vehicula massa eu a turpis. Nam mollis sem rhoncus praesent lectus ornare
vulputate neque ut diam orci convallis maecenas. Pellentesque mattis ut, quis montes. Duis. Donec integer ad,
facilisi vitae ut velit. Duis duis morbi habitasse senectus et primis porttitor.
A propriedade column-gap especifica a lacuna entre as colunas.
Lorem ipsum dolor sit amet, consecteteur adipiscing elit metus lacus urna a.
Pede platea malesuada molestie id sit curabitur justo nibh.
Nec mi sollicitudin natoque, elementum inceptos. Duis purus tellus augue habitant duis, hac quis parturient.
Fusce parturient scelerisque ligula. Vehicula massa eu a turpis. Nam mollis sem rhoncus praesent lectus ornare
vulputate neque ut diam orci convallis maecenas. Pellentesque mattis ut, quis montes. Duis. Donec integer ad,
facilisi vitae ut velit. Duis duis morbi habitasse senectus et primis porttitor.
A propriedade column-rule-style especifica o estilo do elemento entre as colunas:
Lorem ipsum dolor sit amet, consecteteur adipiscing elit metus lacus urna a.
Pede platea malesuada molestie id sit curabitur justo nibh.
Nec mi sollicitudin natoque, elementum inceptos. Duis purus tellus augue habitant duis, hac quis parturient.
Fusce parturient scelerisque ligula. Vehicula massa eu a turpis. Nam mollis sem rhoncus praesent lectus ornare
vulputate neque ut diam orci convallis maecenas. Pellentesque mattis ut, quis montes. Duis. Donec integer ad,
facilisi vitae ut velit. Duis duis morbi habitasse senectus et primis porttitor.
A propriedade column-rule-width especifica a largura da regra entre as colunas:
Lorem ipsum dolor sit amet, consecteteur adipiscing elit metus lacus urna a.
Pede platea malesuada molestie id sit curabitur justo nibh.
Nec mi sollicitudin natoque, elementum inceptos. Duis purus tellus augue habitant duis, hac quis parturient.
Fusce parturient scelerisque ligula. Vehicula massa eu a turpis. Nam mollis sem rhoncus praesent lectus ornare
vulputate neque ut diam orci convallis maecenas. Pellentesque mattis ut, quis montes. Duis. Donec integer ad,
facilisi vitae ut velit. Duis duis morbi habitasse senectus et primis porttitor.
A propriedade rule-color define a cor do elemento separador da coluna.
Lorem ipsum dolor sit amet, consecteteur adipiscing elit metus lacus urna a. Pede platea malesuada molestie id sit curabitur justo nibh. Nec mi sollicitudin natoque, elementum inceptos. Duis purus tellus augue habitant duis, hac quis parturient. Fusce parturient scelerisque ligula. Vehicula massa eu a turpis. Nam mollis sem rhoncus praesent lectus ornare vulputate neque ut diam orci convallis maecenas. Pellentesque mattis ut, quis montes. Duis. Donec integer ad, facilisi vitae ut velit. Duis duis morbi habitasse senectus et primis porttitor.
A propriedade column-span especifica por quantas colunas um elemento deve se estender. Aqui o valor all foi definido
Lorem ipsum dolor sit amet, consecteteur adipiscing elit metus lacus urna a.
Pede platea malesuada molestie id sit curabitur justo nibh.
Nec mi sollicitudin natoque, elementum inceptos. Duis purus tellus augue habitant duis, hac quis parturient.
Fusce parturient scelerisque ligula. Vehicula massa eu a turpis. Nam mollis sem rhoncus praesent lectus ornare
vulputate neque ut diam orci convallis maecenas. Pellentesque mattis ut, quis montes. Duis. Donec integer ad,
facilisi vitae ut velit. Duis duis morbi habitasse senectus et primis porttitor.
A propriedade column-width especifica uma largura ideal sugerida para as colunas.
Lorem ipsum dolor sit amet, consecteteur adipiscing elit metus lacus urna a.
Pede platea malesuada molestie id sit curabitur justo nibh.
Nec mi sollicitudin natoque, elementum inceptos. Duis purus tellus augue habitant duis, hac quis parturient.
Fusce parturient scelerisque ligula. Vehicula massa eu a turpis. Nam mollis sem rhoncus praesent lectus ornare
vulputate neque ut diam orci convallis maecenas. Pellentesque mattis ut, quis montes. Duis. Donec integer ad,
facilisi vitae ut velit. Duis duis morbi habitasse senectus et primis porttitor.