What is grid layout in css?

How to use grid CSS?

Grid CSS is basically a layout structure as we used to float or positioned for the creating layout. But nowadays we use display: grid OR display:inline-grid for the layout designing. CSS grid support all modern browsers. 

We write code display: grid in the main container of the element and all direct child will be gird items as: in this example here used elements -  div, h4, span, strong. All this is a direct child then it's showing as a grid.

This is basic grid css code:

<style>

        .gridContainer {

            display: grid;

            grid-template-columns: auto auto auto;

            background: #eee;

            padding: 15px;

        }

        .gridItem {

            background: #0bf;

            border: 1px solid #fff;

            font-size: 30px;

            padding: 15px;

            text-align: center;

        }

    </style>

<div class="gridContainer">

        <div class="gridItem">a1</div>

        <div class="gridItem">b2</div>

        <h4 class="gridItem">c3</h4>  

        <div class="gridItem">d4</div>

        <div class="gridItem">e5</div>

        <span class="gridItem">f6</span>  

        <strong class="gridItem">g7</strong> 

      </div>

Grid css code result as screenshot:

Grid css structure:

I think you have understood with the above structures: grid structure have some properties as - grid rows, grid column, grid gaps, grid lines.

Grid gaps:

If you want to add gird gaps in the columns then need to use this property:

grid-column-gap: value;

If you want to add gird gaps in the rows then need to use this property:

grid-row-gap: value;

Also, you can set grid gaps in the for both rows and column in one time so need to use this property: grid-gap: rowGapValue columnGapValue;

Below grid gaps example:

<style>

        .gridContainer {

            display: grid;

            grid-template-columns: auto auto auto;

            background: #eee;

            grid-gap: 20px 30px;

            padding: 15px;

        }

        .gridItem {

            background: #0bf;

            border: 1px solid #fff;

            font-size: 30px;

            padding: 15px;

            text-align: center;

        }

    </style>

<div class="gridContainer">

        <div class="gridItem">a1</div>

        <div class="gridItem">b2</div>

        <h4 class="gridItem">c3</h4>  

        <div class="gridItem">d4</div>

        <div class="gridItem">e5</div>

        <span class="gridItem">f6</span>  

        <strong class="gridItem">g7</strong> 

      </div>

Grid gaps css code result as screenshot:

Grid Lines:

Grid lines means if you want define an area for the grid items then need to specified in which line to which lines.

So if you want to define in the column section then use to this property: grid-column-start: 1(from); grid-column-end: 4(whereto);

Same as in the row section: grid-row-start: 1(from); grid-row-end: 4(whereto);

These means you can merge (one + two + three ) grid items then we use it.

Below grid Lines example:

<style>

        .gridContainer {

            display: grid;

            grid-template-columns: auto auto auto;

            background: #eee;

            grid-gap: 20px 30px;

            padding: 15px;

        }

        .gridItem {

            background: #0bf;

            border: 1px solid #fff;

            font-size: 30px;

            padding: 15px;

            text-align: center;

        }

      .gridLines1 {

            grid-column-start: 1;

            grid-column-end: 4;

        }

        .gridLines2 {

            grid-row-start: 2;

            grid-row-end: 4;

        }

    </style>

<div class="gridContainer">

        <div class="gridItem gridLines1">a1</div>

        <div class="gridItem">b2</div>

        <h4 class="gridItem">c3</h4>

        <div class="gridItem">d4</div>

        <div class="gridItem gridLines2">e5</div>

        <span class="gridItem">f6</span>

        <strong class="gridItem">g7</strong>

    </div>

Grid Lines CSS code result as a screenshot: