Jump to main content

Columns

What's nice about CSS columns is that they take any relatively large block of content and re-render it in the style of newspaper columns. Often CSS columns can be achieved by adding almost no extra HTML to a page. Using mobile breakpoints, it also becomes possible to determine how many columns should be rendered at different screen sizes. This example only applies columns on screens wider than 768px. Columns can instantly make content more readable, as well as adding visual appeal to webpages. To prevent elements like paragraphs straddling multiple columns, the break-inside property can be good to use.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Eget mauris pharetra et ultrices neque ornare. Rhoncus urna neque viverra justo nec ultrices. Elementum tempus egestas sed sed. Accumsan in nisl nisi scelerisque eu ultrices. Et ligula ullamcorper malesuada proin libero nunc consequat. Viverra justo nec ultrices dui sapien. Ut eu sem integer vitae justo eget magna fermentum. Velit euismod in pellentesque massa placerat duis ultricies lacus sed.

Nulla aliquet enim tortor at. Nec dui nunc mattis enim ut tellus elementum. Amet luctus venenatis lectus magna. In metus vulputate eu scelerisque felis imperdiet proin fermentum. Nunc non blandit massa enim nec dui nunc mattis. Diam in arcu cursus euismod quis. Velit dignissim sodales ut eu sem integer vitae justo eget. Velit egestas dui id ornare. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc. Id cursus metus aliquam eleifend mi in nulla. Quisque sagittis purus sit amet. Velit egestas dui id ornare arcu odio ut sem. Pellentesque id nibh tortor id aliquet lectus proin nibh. Amet risus nullam eget felis eget nunc lobortis. Justo laoreet sit amet cursus. Varius vel pharetra vel turpis nunc eget lorem dolor sed.

Interdum velit laoreet id donec ultrices tincidunt. Tortor id aliquet lectus proin nibh nisl condimentum id. Ut faucibus pulvinar elementum integer. Nullam vehicula ipsum a arcu cursus vitae. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Lacinia quis vel eros donec ac odio tempor. Id neque aliquam vestibulum morbi blandit cursus risus at. Ultricies integer quis auctor elit sed vulputate mi sit. Elit pellentesque habitant morbi tristique senectus et netus et. Accumsan in nisl nisi scelerisque eu ultrices. At auctor urna nunc id cursus metus aliquam eleifend mi. Pulvinar elementum integer enim neque.

Ut tristique et egestas quis ipsum suspendisse ultrices. Proin sed libero enim sed faucibus. Orci dapibus ultrices in iaculis. Sed odio morbi quis commodo odio. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Molestie at elementum eu facilisis sed odio morbi quis. Nunc congue nisi vitae suscipit tellus mauris. Neque aliquam vestibulum morbi blandit. Eu consequat ac felis donec et odio pellentesque diam volutpat. Sapien eget mi proin sed libero enim sed.

Eget dolor morbi non arcu. Egestas pretium aenean pharetra magna ac placerat vestibulum lectus mauris. Nibh sed pulvinar proin gravida hendrerit lectus. Risus nullam eget felis eget nunc lobortis mattis. Pellentesque nec nam aliquam sem et tortor consequat id porta. Tellus molestie nunc non blandit. Ipsum dolor sit amet consectetur adipiscing elit. Iaculis eu non diam phasellus vestibulum lorem sed. Eget mauris pharetra et ultrices neque ornare aenean euismod. Massa massa ultricies mi quis hendrerit. Felis eget nunc lobortis mattis aliquam. Semper auctor neque vitae tempus quam pellentesque nec nam. Commodo ullamcorper a lacus vestibulum. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Et malesuada fames ac turpis egestas integer. Sit amet facilisis magna etiam tempor.

HTML & PHP 

<div class="my_columns">
  <?php webyep_richText("Fieldname", false, "", true, 900, 600); // WebYepV2 ?>
</div>

CSS

.my_columns {
  margin-bottom: 1rem;
}

@media screen and (min-width: 768px) {
  .my_columns {
    column-count: 2;
    column-gap: 2rem;
    column-rule: solid 1px #ccc;
  }
}

Javascript