CSS Columns

Example#

Jump to section titled: Example#

Code#

Jump to section titled: Code#

HTML

Copy 👋<div class="[ column-count ]">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit nibh, gravida sit amet euismod vitae, molestie id felis. Praesent ac massa dignissim, consequat lorem eget, tempor neque. Maecenas hendrerit quam ut ante consectetur, et aliquam ipsum tincidunt. Vivamus faucibus mi ut est tincidunt dictum. Donec nec sem mi. Nullam faucibus nunc et purus feugiat, eget lacinia velit ullamcor.</p>

<p>Nulla dignissim gravida facilisis. Sed fringilla ligula quis varius porttitor. Fusce vitae laoreet odio, et ultrices massa. Cras vulputate nibh sem, ac lobortis dolor finibus sodales. Curabitur cursus at lorem a pulvinar. Ut porta at felis vulputate rhoncus. Aenean facilisis vulputate dui, ac dignissim tellus rutrum ut.</p>
  
<p> Ut lobortis tellus sed augue rhoncus viverra. In hac habitasse platea dictumst. Sed cursus tincidunt dolor, eu pellentesque ipsum dapibus ut. Nam risus mi, semper eget venenatis vel, tristique ut purus. Vestibulum eu dui varius, bibendum diam pharetra, vestibulum tortor. Donec consectetur bibendum risus in feugiat. Donec bibendum erat nec ex ultricies, sit amet lacinia dolor volutpat.</p>

</div> /* end of col */

CSS

Copy 👋.column-count {
    columns: 28rem auto;
    gap: var(--space-l);
    column-rule-style: solid;
}