As a web developer one of the most useful things to have is a good CSS grid system. In almost every project you will build there will be a use for it. A CSS grid system will allow you to place HTML elements in equally divided boxes next to each other. When you resize the page, everything should scale with it.

A lot of people are familiar with CSS grid systems from libraries like Bootstrap or Materialize. In fact for lots of developers the grid system is one of the main reasons for using the CSS libraries. Because of this a lot of people never took the time and learned how to make their own grid system.

 

Lucky you, it’s real simple to build your own Grid system

Let start by creating the basic HTML markup and adding a container div for our grid. We simply add a HTML <div> tag and  give it a class of container. Now lets start working on the container class in our CSS. Lets say we want a container with a width of 95% so we will have a little space on both sides of the container. Also we want it’s position to be relative.

The height of the container we want to automatically adjust according to the content that is inside of it and we want some spacing on the top and bottom of this container, lets say 50 pixels. Now to translate that all into a piece of CSS code:

/*Container*/
.container{
    position: relative;
    margin: 1%auto;
    max-width: 95%;
    height: auto;
}

So now lets add a few things to our HTML document that we can use to display in a grid. In this example I will use simple pieces of text rapped in a <p> tag. Lets first start with 2 pieces. The first one we will give the text “Column 1” and the second one “column 2”. We also want to give these HTML tags a class of col2. Now we can edit the col2 class inside our CSS file to create our 2 column grid.

We want this 2 column grid to have a few properties. First we want it to have a width, the simplest thing would be to give it a 50% width and float them left. But this will resolve into problems later on. Because if you use the CSS float property, the container box and your body will collapse, meaning that they lose their height within the CSS box model. Because of that, other items will not be placed under the elements you have inside of the container.

In the two images below you can see the box collapse visually. Your next HTML element will be placed under the orange line you see. In the example left the box is collapsed because of the CSS float property. No matter what you but inside of the container div, it will not become bigger anymore. In the image on the right I removed the float left property, this resolved the box collapse, but now we have no grid anymore.

box model collapse CSS box model

Instead of the CSS float property we will use the display inline-block property. This is possible because we gave the container CSS a  property of position relative. With the display inline block property, the HTML elements get displayed next to each other and not stacked under each other. But again there seems to be a problem, we have a width of 50%, display: inline-block, and the elements are still stacked from top to bottom. this is because if we use display inline block this property will have so called white space. So if we use 50% for 2 blocks, it will be 50% + 50% + white space and that is more then 100% pressing your second block to the next line.

We can solve this problem by adding front size zore to our container. Then we can add the font size we actually want to use to our col2 class. Now the white space imposed by the display block inline property will be removed and your blocks will display next to each other.

Your code should now look like this:

HTML:

<!DOCTYPE html>
<html lang=”en”>
<head>
      <metacharset=”UTF-8″>
      <metaname=”viewport”content=”width=device-width, initial-scale=1.0″>
      <metahttp-equiv=”X-UA-Compatible”content=”ie=edge”>
      <title>Document</title>
      <linkrel=”stylesheet”href=”mySheet.css”>
</head>
<body>

 

    <divclass=”container”>
        <divclass=”col2″>column 1</div>
        <divclass=”col2″>column 2</div>
    </div>
</body>
</html>
CSS:
/*Container*/
.container{
    position: relative;
    margin: 1%auto;
    max-width: 95%;
    height: auto;
    font-size: 0px;
}
/*grid system columns*/
.col-2{
     display: inline-block;
     width: 49%;
    font-size: 16px;
}

Lets improve and expand our CSS grid system

At this point our 2 columns inside our grid system are exactly next to each other. In most cases we want a bit of spacing between our columns. So lets start adding some margin to our columns. The simpelst way would appear to be ; take some percentages of the width and add these as margin. But if you are going to expand your CSS grid, you to want to be counting how much space you can have left and right of each column without being pushed to the next line.

Also in some cases you might want to work with other measurements then percentages, because for example the designer wanted exactly 20 pixels of spacing between each column. Now we really have a problem if we want to take some percentages from the width and add them as margin. Since we don’t know how much percent is 20 pixels. We we need to use a way that is easy to reuse when we want to expand our grid system and one that can make use of of more then percentages.

To do this we need to adjust our width property like this:

  • width: cacl((100% – 40px * 2) / 2);

Now we know that each column will have 40 pixels of margin, 20 pixels on the left and 20 pixels on the right. We also want some margin on the top and bottom, lets use 1% for that. We can also give your columns a height and background so we can see them a bit better. You can choose your own height and background color, I will go for 75 pixels and gray for this example.

Your col2 css class should now look like this:

.col2{
display: inline-block;
width: calc((100% – 40px * 2) / 2);
margin: 1% 20px;
height: 75px;
background: rgba(100,100,100, 0.4);
}

Now if you want to expand your CSS grid system with a 3 column grid, 4 column grid and so on, the only thing you have to do is copy your col2 css class and change every 2 into a 3, 4,  5 and so on. So your first 5 columns i the grid would look like this:

/*grid system columns*/
.col2{
display: inline-block;
width: calc((100% – 40px * 2) / 2);
margin: 1% 20px;
height: 75px;
background: rgba(100,100,100, 0.4);
}

.col3{
display: inline-block;
width: calc((100% – 40px * 3) / 3);
margin: 1% 20px;
height: 75px;
background: rgba(100,100,100, 0.4);
}

.col4{
display: inline-block;
width: calc((100% – 40px * 4) / 4);
margin: 1% 20px;
height: 75px;
background: rgba(100,100,100, 0.4);
}

.col5{
display: inline-block;
width: calc((100% – 40px * 5) / 5);
margin: 1% 20px;
height: 75px;
background: rgba(100,100,100, 0.4);
}

You can see a live example of the css grid system on my codepen. If you want you can keep expanding this grid system with more columns, just change the number of the grid in the width and class name and you are ready to go.

If there are any questions or remarks, please leave a comments below.

 

 

Share.

Leave A Reply