Column-like layout in CSS without Bootstrap or Grids (Part-1)

#html #css #webdev

Ever wondered how to create columns in CSS without using grids or those pesky col-md-sth in a labyrinth of div tags ?

There's mainly two ways you could do so. I shall explain with examples and scenarios as this is how I understand the best.

Scenario 1: say you would like to write your article in newspaper style. As you know, big chunks of continuous texts in newspapers are written in columns instead of paragraphs. How could you possibly achieve such a look with minimal effort? Turns out our old but mighty CSS has a property to do so.The property

column-count:

let's take an example
I want to write a piece of text entirely in newspaper-ish style. The body structured with html would go like this

<section>

<h3>Things that don't make sense</h3>

<div class="col">


Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae. 
Integer vitae justo eget magna fermentum iaculis eu non.
Rhoncus urna neque viverra justo nec ultrices dui. Risus viverra
adipiscing at in tellus integer feugiat scelerisque.
In hendrerit gravida
rutrum quisque non tellus. Consequat semper viverra nam
libero  justo laoreet sit amet.


</div>

</section>

And now with one line of CSS we will break this chunk of text in columns. This would be

.col{
  column-count: 3;
}

And the final output would be

The best thing is if you click on the edit on Codepen and try resizing the window size, you'll see it adjusts according to the browser size. Woohoo!

But wait there's more, you can also customize your columns to have gaps, column-rules and what not. I'll leave the link to the w3schools page for you to play around with it more

https://www.w3schools.com/css/css3_multiple_columns.asp

While I'm aware that this might not be as elegant as the generic Grids, this took my attention for its sheer simplicity.
Often you might only need a simple column-ish layout and using Grids are somewhat of an overkill for those times.

Let me know what you guys like and dislike about this CSS property in comments below. Also,stay tuned for part-2.