Blog

  • Build A Responsive Grid System

    Posted by Prachi Ahuja | Last Updated: 29-Jun-18

    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;
            }
    

Tags: grails