How to deal with Columns.

One challenge that many of us have had when make a website is to divide or wrap the content in different sized boxes correctly. It can be a tricky thing to do for many newcomers to the world of design and programming. This post will explain one of the easier ways to deal with this problem with the use of only CSS and HTML. I’m going to cut to the chase and go directly to the code. 

Basic Columns

1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6

The best way to set up responsive columns is to use percentage for the width so it can easily works on any display and resolution used, These are some basic columns with a spacing of 2% using  .wq-col { margin-right: 2% ).  If we have the 2% spacing on the right side of all the columns, we are going to end up with a row with a width of 102%. To fix that we can put in .wq-col:last-child { margin-right: 0% }.

<div class="wq-row"> 
  <div class="wrapper wq-col wq-col-1-2">1/2</div>
  <div class="wrapper wq-col wq-col-1-2">1/2</div>
</div>
<div class="wq-row">
  <div class="wrapper wq-col wq-col-1-3">1/3</div>
  <div class="wrapper wq-col wq-col-1-3">1/3</div>
  <div class="wrapper wq-col wq-col-1-3">1/3</div>
</div>
<div class="wq-row">
  <div class="wrapper wq-col wq-col-1-4">1/4</div>
  <div class="wrapper wq-col wq-col-1-4">1/4</div>
  <div class="wrapper wq-col wq-col-1-4">1/4</div>
  <div class="wrapper wq-col wq-col-1-4">1/4</div> 
</div>
<div class="wq-row">
  <div class="wrapper wq-col wq-col-1-5">1/5</div>
  <div class="wrapper wq-col wq-col-1-5">1/5</div>
  <div class="wrapper wq-col wq-col-1-5">1/5</div>
  <div class="wrapper wq-col wq-col-1-5">1/5</div>
  <div class="wrapper wq-col wq-col-1-5">1/5</div>
</div>
<div class="wq-row">
  <div class="wrapper wq-col wq-col-1-6">1/6</div>
  <div class="wrapper wq-col wq-col-1-6">1/6</div>
  <div class="wrapper wq-col wq-col-1-6">1/6</div>
  <div class="wrapper wq-col wq-col-1-6">1/6</div>
  <div class="wrapper wq-col wq-col-1-6">1/6</div>
  <div class="wrapper wq-col wq-col-1-6">1/6</div> 
</div>
/* row and column base */
.wq-row {
  width: 100%;
  clear: both;
}
.wq-col {
  float: left;
  box-sizing: border-box;
  transition: .2s ease;
  margin-right: 2%;
}
.wq-col:last-child {
  margin-right: 0%;
}

/* columns */
.wq-col-1-2 {
  width: 49%;
}
.wq-col-1-3 {
  width: 32%;
}
.wq-col-1-4 {
  width: 23.5%;
}
.wq-col-1-5 {
  width: 18.4%;
}
.wq-col-1-6 {
  width: 15%;
}

The row DOM needs to have the style of clear: both;If not, the columns would collapse or be misaligned if one column has more content than the others.

The .wq-col { is our main way to define our column in these examples. It’s used for alignments and for keeping the content inside their containers. By Using  float: left;, it will tell the columns/containers to stay in line starting from the left.

 

Let’s look at some other options that I will include in the final compilation at the end of the post.

1/5th

1/5
4/5
2/5
3/5
3/5
2/5
4/5
1/5
<div class="wq-row">
  <div class="wrapper wq-col wq-col-1-5">1/5</div>
  <div class="wrapper wq-col wq-col-4-5">4/5</div>
</div>
<div class="wq-row">
  <div class="wrapper wq-col wq-col-2-5">2/5</div>
  <div class="wrapper wq-col wq-col-3-5">3/5</div>
</div>
<div class="wq-row">
  <div class="wrapper wq-col wq-col-3-5">3/5</div>
  <div class="wrapper wq-col wq-col-2-5">2/5</div>
</div> 
<div class="wq-row">
  <div class="wrapper wq-col wq-col-4-5">4/5</div>
  <div class="wrapper wq-col wq-col-1-5">1/5</div>
</div>

1/6th

1/6
5/6
1/3
4/6
1/2
1/2
4/6
1/3
5/6
1/6
<div class="wq-row">
  <div class="wrapper wq-col wq-col-1-6">1/6</div>
  <div class="wrapper wq-col wq-col-5-6">5/6</div>
</div>
<div class="wq-row">
  <div class="wrapper wq-col wq-col-1-3">1/3</div>
  <div class="wrapper wq-col wq-col-4-6">4/6</div>
</div>
<div class="wq-row">
  <div class="wrapper wq-col wq-col-1-2">1/2</div>
  <div class="wrapper wq-col wq-col-1-2">1/2</div>
</div>
<div class="wq-row">
  <div class="wrapper wq-col wq-col-4-6">4/6</div>
  <div class="wrapper wq-col wq-col-1-3">1/3</div>
</div>
<div class="wq-row">
  <div class="wrapper wq-col wq-col-5-6">5/6</div>
  <div class="wrapper wq-col wq-col-1-6">1/6</div>
</div>

This example is not meant to be mixed, let’s say 1/6 + 2/3 + 1/6 = 1/1. It would work, but the responsive aspect of this would not work. as I have not added that in to the CSS code. so I would not recommend it for use as it is.

1/6
2/3
1/6

You could add in some CSS or JS to make all of the different columns become responsive to any device. I’m not going to show you how to do all that now. Maybe I write an article about just that later.

Download Example

Download .CSS

Got Something To Say?

We respect your privacy and will not publish your personal details.

*