Working with CSS Grid

2020-05-07

1. What is a grid?

A network of lines that cross each other to form a series of squares or rectangles.

2. What is CSS grid?

CSS Grid is a powerful tool that allows for 2-dimensional layouts to be created on the web. It is a 2-dimensional system, meaning it can handel layout in row and columns.

3. Basic terminologies.

1. Container :- A section or a division in which we want to work CSS grid(or rows and columns). We create a div container by setting the CSS display property to grid. ex.

 .container{display:grid; 
}

2. grid-template-columns :- A CSS property to specify number of columns and their width. The width can be any no negative CSS length value like fr, %, px, em, etc. The best practice is to use fr(fraction) for responsiveness. We can use grid-template-rows too for specifing rows but in this blog we are going to use the column approach.

We do this by setting CSS property of our container as grid-template-columns to the width values.

ex.

 .container{ 
        display:grid;
     grid-template-columns: 1fr 3fr 1fr
 }

3. grid-area :- This property is used to specify the location and size of an item inside the container.

We specify a name for every items to use inside our grid-template-area (We will learn this next.) We set the property grid-area with a name to each items we want to use inside our container. In this exapmle we have 5 items as Navigation-Bar ,Main, Left-Side-Item, Right-Side-Item and Footer. We give all of them a name as

 .navbar{grid-area:navbar}

4. grid-template-areas :- The last and most important step is to specify our layout in term of rows and columns, and we do this by using grid-template-areas inside our container as

.container{
  
display:grid;
grid-template-columns:1fr 3fr 1fr;
grid-template-areas:"navbar navbar navbar"
            "leftSide main rightSide"
            "footer footer footer";
}

Note : We use the name specified grid-area inside our grid template area.

We use Media Queries to change the layout on diffrent screen sizes by changing the grid-template-areas.

Implementation

We are going to implement a simple 5 component layout as

Desktop View

Mobile View

Step 0 :- Basic Html

    <div class="container">
     <div class="navbar">
         NavBar
    </div>
        <div class="main">
        Main
    </div>
        <div class="leftSide">
        Left  Side
    </div>
        <div class="rightSide">
         Right Side
    </div>
        <div class="footer">
        Footer
    </div>
     </div>

Step 1 :- CSS

/*Creating grid-template-columns and grid-template-areas*/
.container{
    display: grid;
    grid-template-columns:1fr 3fr 1fr ;
    grid-template-areas:"navbar navbar navbar"
                        "leftSide main rightSide"
                        "footer footer footer";
    }
/*specifing grid-areas*/
.navbar{ grid-area: navbar; }
.main{ grid-area: main; }
.leftSide{ grid-area: leftSide; }
.rightSide{ grid-area: rightSide; }
.footer{ grid-area: footer; }

This is it for our desktop view but for our mobile view let's add media query

 
@media only screen and (max-width: 600px)
 {
 .container{
    grid-template-columns:1fr;
    grid-template-areas:"navbar"
                        "main"
                        "leftSide"
                        "rightSide"
                        "footer";
 }

In this article we have had a very quick look through the Grid Layout Specification. Have a play with the code.

We would like to grow our readership. Can you help us out by sharing this blog post?

Written by Kundan Chandel