CSS Columns

In this example below you will see how to do a CSS Columns with some HTML / CSS and Javascript

Purely CSS made column dividers.

Thumbnail
This awesome code was written by rluque, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rluque ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Columns</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      #wrapper {
  width: 60%;
  margin: auto;
  font-family: sans-serif;
}

p {
  column-count: 3;
  column-gap: 20px;
  column-rule-style: solid;
  column-rule-color: orange;
}

p::first-line {
  font-weight: bold;
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div id="wrapper">
  <h2>About us</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque tempor metus eget fringilla. Mauris nulla purus, ultricies sit amet sollicitudin id, tristique eget velit. Quisque et massa mi. Phasellus vulputate augue sed magna sollicitudin vel imperdiet justo consequat. Ut euismod rutrum ultrices. Pellentesque vitae mi elit, at rhoncus est. Curabitur dignissim semper varius. Donec tempus lectus a massa venenatis fringilla. Mauris feugiat nulla a lacus congue id aliquet massa tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent malesuada pharetra arcu, id adipiscing lorem facilisis sed. Praesent lectus sapien, consectetur nec placerat nec, consectetur sit amet felis.

Praesent adipiscing ligula a metus dictum molestie vitae ut nibh. Donec libero metus, vulputate sed luctus ac, faucibus at enim. Sed nec est et arcu mattis malesuada sed id nisi. Sed magna magna, imperdiet at dignissim non, vehicula eget ipsum. Vivamus nec enim in ante auctor porttitor. Suspendisse nisi nibh, fermentum et dapibus consectetur, gravida pharetra justo. Maecenas euismod sodales hendrerit. Vestibulum condimentum vulputate sapien, eu consectetur sem lobortis et. Sed lorem dolor, congue at venenatis in, bibendum vel elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, augue a tempus elementum, ipsum leo venenatis libero, non consequat nisi est eu nibh. Nulla facilisi. Vivamus malesuada varius metus, eget commodo ligula consequat et. Quisque in nisl quam.</p>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/rluque/css-columns-Aabdh */
#wrapper {
  width: 60%;
  margin: auto;
  font-family: sans-serif;
}

p {
  column-count: 3;
  column-gap: 20px;
  column-rule-style: solid;
  column-rule-color: orange;
}

p::first-line {
  font-weight: bold;
}

Comments