Header Ads Widget

CSS Grid: Be the master of grid based layout design

Font-end design is becoming more and more complex as time goes on. Earlier, we used float and position to align our elements. Later we shifted to CSS flex. But the problem with CSS flex was that, it was one dimensional. Internet usage is increasing day by day, resulting in increasing use of mobile apps, PWA apps and websites. We needed some way to design layouts in 2 dimensions with ease. Here comes the CSS grid to help. It provides a mechanism for developers to divide available space for layout into columns and rows using a set of predictable sizing behaviors.

In addition, due to its ability to explicitly position items in the grid, Grid Layout allows dramatic transformations in visual layout structure without requiring corresponding markup changes.

What is CSS Grid?

CSS Grid is a two-dimensional layout system that aims to help in design dynamic and complex layouts. It offers a grid-based layout design, with rows and columns, making it easier to design web pages. Like tables, grid layout enables us to align elements into columns and rows in a very simpler way.

A grid can be designed using a parent (grid container) and its children (grid items)

Simple Grid based layout example.
        .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        background-color: #2196F3;
        padding: 10px;
        }
        .grid-item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
        }
        
        <div class="grid-container">
            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>  
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>  
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
            <div class="grid-item">9</div>  
        </div>
        
1
2
3
4
5
6
7
8
9

CSS Grid layout

As I discussed above, CSS Grid is a two-dimensional layout system. Grid items can be aligned on X and Y axes (vertically and horizontally) at the same time.

css grid column row

CSS Grid Properties

grid-template-rows
grid-auto-rows
grid-row-gap
row-gap
grid-gap
grid-auto-flow
grid-template-columns
grid-auto-columns
grid-column-gap
column-gap
grid-template-areas

grid-template-columns

The grid-template-columns property specifies the number of columns and their width in the grid layout. The values are list separated by space, where each value specifies the size of the respective column.

grid-template-columns: none|auto|repeat|max-content|min-content|lengthValue;

grid-template-columns
One
Two
Three
Four
Five
Six
Seven
Eight

Above example explained

auto auto auto :- 3 columns, all having auto length
repeat(3, 100px) :- 3 columns, all having 100px each
50px 100px :- 2 columns having 50px and 100px length respectively
10% 10% 10% 10% 10% :- 4 columns having 10% each length
max-content max-content :- each column length to depend on the largest item in the column

grid-template-rows

The grid-template-rows tells the vertical height of row. This property specifies the number of rows and their width in the grid layout. The values are list separated by space, where each value specifies the size of the respective row.

grid-template-rows: none|auto|repeat|max-content|min-content|lengthValue;

grid-template-rows
One
Two
Three
Four
Five

Above example explained

auto :- all rows having auto height
repeat(3, 50px) :- 3 rows, all having 100px height each
30px 90px 50px; :- 3 rows having 30px, 90px and 50px height respectively
1fr 3fr 1fr :- 3 rows, 1st row: 1 fraction of total height | 2nd row: 2 fraction of total height | 3rd row: 1 fraction of total height
40px auto minmax(15px, 70px); :- 3 rows, 1st row: 40px, 2nd row: auto and 3rd row: min height- 15px | max height: 70px

grid-gap

grid-gap property is used to specify the size of the gap between the rows, and between the columns. It is very easy to maintain the space between elements because of this property. You can apply gaps between columns and rows at the same time.

grid-gap
1
2
3
4
5
6
7
8
9

grid-column-gap

grid-column-gap is used only for columns. This property is usded to specify the size of the gap between the columns.

grid-row-gap

grid-row-gap is used only for rows. This property is usded to specify the size of the gap between the rows.

grid-template-areas

grid-template-areas is an alternate method to position items on the grid. You can use line-based placement. Each line represent one row.

grid-template-areas

Let's create a layout based on above image:

        <div className="layout-grid">
        <div className="headerBox">Header</div>
        <div className="sidebarBox">Sidebar</div>
        <div className="contentBox">Content</div>
        <div className="footerBox">Footer</div>
        </div>
        
        /* CSS */
        .layout-grid {
            display: grid;
            height: 100vh;
            grid-template-columns: 1fr 3fr;
            grid-template-rows: 80px auto 50px;
            grid-template-areas: "header header"
                        "sidebar content"
                        "footer footer"; 
        }

        .headerBox {
            grid-area: header;
            background: #900d5e;
        }
        .sidebarBox {
            grid-area: sidebar;
            background: #7747e6
        }
        .contentBox {
            grid-area: content;
            background: #008dff
        }
        .footerBox {
            grid-area: footer;
            background-color: #73a922
        }
        

As you can see in the above example, we have passed three rows to grid-template-areas. Each row describes the positioning of grid items. In the first row we have positioned header in both col-1 and col-2. In the 2nd row we have positioned sidebar for col-1 and content for col-2. In the 3rd row we have positioned footer for both col-1 and col-2.

Responsive layout design using grid-template-areas

Let's take the above example and make it responsive.

css grid
        <div className="layout-grid">
        <div className="headerBox">Header</div>
        <div className="sidebarBox">Sidebar</div>
        <div className="contentBox">Content</div>
        <div className="footerBox">Footer</div>
        </div>

        /* CSS */
        @media only screen and (max-width: 568px) {
            .layout-grid {
            grid-template-areas: "header header"
                        "sidebar sidebar"
                        "content content"
                        "footer footer";
            grid-template-rows: 50px 70px auto 50px;
            }
        }
        

grid-auto-columns

The grid-auto-columns property sets and affects only columns with the size is not set.

In the below example, all the grid items width are set to 100px except grid-item3.

            #grid-container {
                display: grid;
                grid-template-areas: "a a";
                grid-auto-columns: 100px;
                gap: 10px;
                height: 100px;
                padding: 10px;
                background-color: #9D0D6C;
            }
            #grid-container > div {
                background-color: #fdddf2;
            }

            <div id="grid-container">
                <div id="grid-item1"></div>
                <div id="grid-item2"></div>
                <div id="grid-item3" style="width: 40px;"></div>
                <div id="grid-item4"></div>
                <div id="grid-item5"></div>
                <div id="grid-item6"></div>
            </div>
            
grid-auto-colums

grid-auto-rows

Similar to grid-auto-columns, grid-auto-rows property sets and affects only the rows size. It applies only to those items which size is not set.

Parent (Grid Container) properties

  • justify-items: It align items horizontally on x axis in the cell
  • align-items: It align items vertically on y axis in the cell
  • justify-content: It is used to align the grid items inside the container.
        .grid-container {
            height: 250px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            background-color: #9D0D6C;
            padding: 10px;
            gap: 1px;
        }   
        .grid-container > div {
            background-color: #fdddf2;
            padding: 10px 0;
            font-size: 30px;
        }

        <div class="grid-container">
            <div>one</div>
            <div>two</div>
            <div>three</div>  
            <div>four</div>
            <div>five</div>
            <div>six</div>  
        </div>
        
justify-items: start | center | end | stretch
align-items: start | center | end | stretch
one
two
three
four
five
six
justify-content: start | center | end | space-between | space-around | space-evenly
one
two
three

Child (Grid items) properties

  • justify-self
  • align-self
justify-self: It is used to justify a box inside a container. It is used to position element on horizontal axis. It's values can be start | end | center | stretch .
justify-self: start:
child
justify-self: center:
child
justify-self: end:
child
justify-self: stretch:
child

Note that justify-self is ignored in Flexbox layouts.

align-self: It is used to align a box inside a container. It is used to position element on cross axis (vertically). It's values can be start | end | center | stretch .
align-self: start:
child
align-self: center:
child
align-self: end:
child
align-self: stretch:
child

How to align a div vertically and horizontally center within container?

child
        
        <style>
        .grid{
            display: grid;
            height: 100px;
            background-color:#0099ff;
            padding: 5px 10px; 
            justify-items: center; 
            align-items: center;
        }
        </style>    
        <div class="grid">
            <div style=" background-color: #f5f5f5;">child</div>
        </div>
        
        

How to decide what to use ? Flex vs CSS Grid. Which is better CSS Grid or Flexbox?

Though, this post is not about CSS Grid or Flexbox. But, I as a developer it is good to know it.
The golden rule for deciding to use display grid or flex is, if you need to layout the elements in 1 dimension, you can use flexbox, if you need to control the elements in 2 dimensions then better use grid. CSS grid is more advance, you can achieve very complex and dynamic layout with ease. CSS Grid latest concepts which was introduced after Flex therefore its support is not across browsers. But, all the latest browser are already supporting it.

Post a Comment

0 Comments