DEV Community

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

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

shamimahossai13 profile image Shamima Hossain ・2 min read

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.

Discussion

pic
Editor guide
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 Author

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