Build A Responsive Grid System

Posted By : Prachi Ahuja | 24-May-2018

There are some series of steps to build the grid system:

1. Choose a spec
2.Set box-sizing to border-box
3.Create a container for grid
4.Calculate column width
5.Determine positions of the gutter

 

Most of the steps are straightforward once we go through the description of these steps.

 

Step 1: Choose a spec
While choosing a spec we have three options-
-CSS Grid
-Flexbox
-CSS floats

 

CSS grid is the best option for creating grids. Every browser hides this layout behind a flag.


And considerations for using Flexbox and Floats are same.

 

Step 2: Set box-sizing 
Box-sizing property alters the CSS box model which is usually used by browsers for calculating width and height properties.

 

Step 3: Create a container for grid
It must be required to create a container to determine the maximum width of the grid.

 

           
           .container {
           max-width: 1170px;
           margin-right: auto;
           margin-left: auto;
           }     
        

Step 4: Calculate column width
If using floats to create columns and gutters we have five properties to go along with.
-width
-margin-left
-margin-right
-padding-left
-padding-right

 

Here,
We create columns by using width and gutters by using margin and padding.
We have taken a maximum width of 1170px and it means that each column is 390px(1170 ÷ 3). It will work great at viewport larger than 1170px but breaks at the smaller viewport.

           
          .three-col-grid .grid-item {
           width: 380px;
           float: left;
           }
        

So here we can go with giving width in percent so it will work great in smaller viewports too.

          
          .three-col-grid .grid-item  {
           width: 33.33333%;
           float: left;
}
        

But here comes one more case, if all the child elements are floated then the container's height gets collapsed. To solve the issue we can do-

 

          
             .three-col-grid:after {
             display: table;
             clear: both;
             content: '';
          }
        

Step 5: Determine positions of the gutter
Here are some possible ways to create gutters these are:-
1.One-sided(margin)
2.One-sided(padding)
3. Double-sided split equally(margin)
4. Double-sided split equally(padding)

        Method-1

          
            .grid-item {
            margin-right: 20px;
            float: left;
            }
   

Here if we need columns in percent and margin in pixels we can't do so with two different units.

It can be done by using CSS calc function.

          
           .grid-item {
           width: calc((100% - 20px * 2) / 3);
           }
        
          
          .grid-item:last-child{
           margin-right:0;
           float:right;
           }
        
     Method-2
 
      .grid-item {
           padding-right: 20px;
           float: left;
           }
        
         
          .grid-item:last-child{
          padding-right:0;
          float:right;
          }
        
    Method-3         
     .grid-item {
          margin-right: 10px;
          margin-left: 10px;
          float: left;
         }
         
         .grid-item {
         width: calc((100% - 20px * 3) / 3);
         margin-right: 10px;
         margin-left: 10px;
         float: left;
         }

       Method-4

        
        .grid-item {
        width: 33.3333%;
        padding-right: 10px;
        padding-left: 10px;
        float: left;
        }

About Author

Author Image
Prachi Ahuja

Prachi is a UI Developer having knowledge of HTML5, CSS3, Javascript, Jquery. She is dedicated towards her work.Her hobbies are drawings/paintings and writing articles.

Request for Proposal

Name is required

Comment is required

Sending message..