DEV Community

Cover image for Column-like layout in CSS without Bootstrap or Grids (Part-2)
Shamima Hossain
Shamima Hossain

Posted on

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

Another great way to to design our text into columns is going to back to the old ways of building websites. If you remember correctly, primitive websites were all just tables tweaked in different ways.

Well that's great because we can use just that to quickly place our texts in different columns . As always I would like to illustrate it with an example.

Let's first create an html skeleton of our texts

<section id="exhibit">

 <div class="col">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Vivamus porta massa eget pellentesque aliquam. Ut malesuada 
 sapien aliquam, 
 pharetra metus quis, finibus dui. 
 Curabitur fermentum ac leo non consectetur. 
 </div>


 <div class="col">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Vivamus porta massa eget pellentesque aliquam. Ut malesuada 
 sapien aliquam, 
 pharetra metus quis, finibus dui. 
 Curabitur fermentum ac leo non consectetur. 
 </div>


 <div class="col">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Vivamus porta massa eget pellentesque aliquam. Ut malesuada 
 sapien aliquam, 
 pharetra metus quis, finibus dui. 
 Curabitur fermentum ac leo non consectetur. 
 </div>

Enter fullscreen mode Exit fullscreen mode

Then the CSS styling would be like this

#exhibit{
    height: 500px;
    display: table;
    width: 100%;
   }
.col{
    padding-left: 2em;
    padding-right: 2em;
    font-size: 1.2em;
    font-family: sans-serif;
    overflow: hidden;
    display: table-cell;
    background: grey;
   }
Enter fullscreen mode Exit fullscreen mode

So we would like to lay these 3 divs as three separate columns. If you read the code, you would see the divs are wrapped in a section.

We set this parent/ wrapper to display: table . Then if we set its children to display: table-cell we would see them lined up in 3 columns.

The final output would look something like this

You can play around more with it if you like. Do let me know what you think of this in the comments below.
Thanks for reading.

Top comments (2)

Collapse
 
theooliveira profile image
Theo Oliveira

I was looking for this. I was trying to use flexbox but as I am starting front I guess I miss some concepts to make it work properly. Thanks

Collapse
 
shamimahossai13 profile image
Shamima Hossain

Hi Theo...I'm glad you found it helpful.