Week 4:

Text Columns



Columns are useful for breaking up large blocks of text to make them more legible. Below are three paragraphs of text in a div with no columns, showing the default behavior of text inside of an HTML element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a odio ac risus ultrices bibendum nec sit amet augue. Etiam egestas ullamcorper nisl in ornare. Maecenas non ligula efficitur, tempor est nec, ultricies est. Vivamus scelerisque odio et nulla iaculis, et consequat orci tincidunt. Aliquam erat volutpat. Fusce vitae mauris finibus, congue erat quis, pulvinar dui. Nam vitae dignissim sem.

Donec porta, justo in egestas tincidunt, leo ante lacinia urna, vitae gravida lectus dui at massa. Nunc viverra neque vel erat mollis, et hendrerit tellus vehicula. Donec libero nisi, porta rhoncus molestie id, tempor sodales lorem. Ut eget pharetra velit, non venenatis felis. Aliquam nibh lorem, dapibus vitae nisl ut, mollis imperdiet metus. Etiam vulputate a lorem sit amet pretium. Morbi at ligula sed enim bibendum sollicitudin quis id arcu. Sed id ligula lacus. Aliquam tincidunt justo non urna lacinia vestibulum. Donec tincidunt luctus malesuada. Mauris finibus condimentum enim, eget tristique erat viverra sed. Vivamus rhoncus accumsan malesuada. Proin rutrum dictum urna et ultricies.

Sed convallis est a ex porta porta. Ut iaculis libero nulla, at molestie nulla fringilla nec. Phasellus ex nisi, sagittis in risus at, maximus dapibus lectus. Integer dignissim augue at nisi facilisis, a iaculis mauris sodales. Pellentesque sit amet felis magna. Donec dignissim, felis at luctus maximus, sapien libero vehicula nulla, varius sagittis felis enim vel dui. Fusce sit amet mi ac velit ullamcorper consequat eu at nisl.

Adding a columns property will automatically divide the text evenly within the HTML element. For compatibility reasons, you must also include a -webkit-columns and -moz-columns properties to ensure compatibility across different types of browsers.

.col2{
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a odio ac risus ultrices bibendum nec sit amet augue. Etiam egestas ullamcorper nisl in ornare. Maecenas non ligula efficitur, tempor est nec, ultricies est. Vivamus scelerisque odio et nulla iaculis, et consequat orci tincidunt. Aliquam erat volutpat. Fusce vitae mauris finibus, congue erat quis, pulvinar dui. Nam vitae dignissim sem.

Donec porta, justo in egestas tincidunt, leo ante lacinia urna, vitae gravida lectus dui at massa. Nunc viverra neque vel erat mollis, et hendrerit tellus vehicula. Donec libero nisi, porta rhoncus molestie id, tempor sodales lorem. Ut eget pharetra velit, non venenatis felis. Aliquam nibh lorem, dapibus vitae nisl ut, mollis imperdiet metus. Etiam vulputate a lorem sit amet pretium. Morbi at ligula sed enim bibendum sollicitudin quis id arcu. Sed id ligula lacus. Aliquam tincidunt justo non urna lacinia vestibulum. Donec tincidunt luctus malesuada. Mauris finibus condimentum enim, eget tristique erat viverra sed. Vivamus rhoncus accumsan malesuada. Proin rutrum dictum urna et ultricies.

Sed convallis est a ex porta porta. Ut iaculis libero nulla, at molestie nulla fringilla nec. Phasellus ex nisi, sagittis in risus at, maximus dapibus lectus. Integer dignissim augue at nisi facilisis, a iaculis mauris sodales. Pellentesque sit amet felis magna. Donec dignissim, felis at luctus maximus, sapien libero vehicula nulla, varius sagittis felis enim vel dui. Fusce sit amet mi ac velit ullamcorper consequat eu at nisl. 

.col3{
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a odio ac risus ultrices bibendum nec sit amet augue. Etiam egestas ullamcorper nisl in ornare. Maecenas non ligula efficitur, tempor est nec, ultricies est. Vivamus scelerisque odio et nulla iaculis, et consequat orci tincidunt. Aliquam erat volutpat. Fusce vitae mauris finibus, congue erat quis, pulvinar dui. Nam vitae dignissim sem.

Donec porta, justo in egestas tincidunt, leo ante lacinia urna, vitae gravida lectus dui at massa. Nunc viverra neque vel erat mollis, et hendrerit tellus vehicula. Donec libero nisi, porta rhoncus molestie id, tempor sodales lorem. Ut eget pharetra velit, non venenatis felis. Aliquam nibh lorem, dapibus vitae nisl ut, mollis imperdiet metus. Etiam vulputate a lorem sit amet pretium. Morbi at ligula sed enim bibendum sollicitudin quis id arcu. Sed id ligula lacus. Aliquam tincidunt justo non urna lacinia vestibulum. Donec tincidunt luctus malesuada. Mauris finibus condimentum enim, eget tristique erat viverra sed. Vivamus rhoncus accumsan malesuada. Proin rutrum dictum urna et ultricies.

Sed convallis est a ex porta porta. Ut iaculis libero nulla, at molestie nulla fringilla nec. Phasellus ex nisi, sagittis in risus at, maximus dapibus lectus. Integer dignissim augue at nisi facilisis, a iaculis mauris sodales. Pellentesque sit amet felis magna. Donec dignissim, felis at luctus maximus, sapien libero vehicula nulla, varius sagittis felis enim vel dui. Fusce sit amet mi ac velit ullamcorper consequat eu at nisl.

Rules can automatically be added between columns and the size of the gap can be adjusted using column-rule and column-gap.

.fatgap{
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
    column-rule: white 2px solid;
    column-gap: 50px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a odio ac risus ultrices bibendum nec sit amet augue. Etiam egestas ullamcorper nisl in ornare. Maecenas non ligula efficitur, tempor est nec, ultricies est. Vivamus scelerisque odio et nulla iaculis, et consequat orci tincidunt. Aliquam erat volutpat. Fusce vitae mauris finibus, congue erat quis, pulvinar dui. Nam vitae dignissim sem.

Donec porta, justo in egestas tincidunt, leo ante lacinia urna, vitae gravida lectus dui at massa. Nunc viverra neque vel erat mollis, et hendrerit tellus vehicula. Donec libero nisi, porta rhoncus molestie id, tempor sodales lorem. Ut eget pharetra velit, non venenatis felis. Aliquam nibh lorem, dapibus vitae nisl ut, mollis imperdiet metus. Etiam vulputate a lorem sit amet pretium. Morbi at ligula sed enim bibendum sollicitudin quis id arcu. Sed id ligula lacus. Aliquam tincidunt justo non urna lacinia vestibulum. Donec tincidunt luctus malesuada. Mauris finibus condimentum enim, eget tristique erat viverra sed. Vivamus rhoncus accumsan malesuada. Proin rutrum dictum urna et ultricies.

Sed convallis est a ex porta porta. Ut iaculis libero nulla, at molestie nulla fringilla nec. Phasellus ex nisi, sagittis in risus at, maximus dapibus lectus. Integer dignissim augue at nisi facilisis, a iaculis mauris sodales. Pellentesque sit amet felis magna. Donec dignissim, felis at luctus maximus, sapien libero vehicula nulla, varius sagittis felis enim vel dui. Fusce sit amet mi ac velit ullamcorper consequat eu at nisl.

Resources