Introduction of Grids in CSS

Introduction of Grids in CSS

List of featured

• grid
• grid-area
• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-column
• grid-column-end
• grid-column-gap
• grid-column-start
• grid-gap
• grid-row
• grid-row-end
• grid-row-gap
• grid-row-start
• grid-template
• grid-template-areas
• grid-template-columns
• grid-template-rows

1.grid

The grid property is a shorthand property for

We can design grid row and column wise without using any width and float css.

For Example:- I have 4 boxes, I need to arrange this 4 boxes in one row using a grid.

Code :HTML

<div class="container">    <div class="box">Grid 1</div>    <div class="box">Grid 2</div>    <div class="box">Grid 3</div>    <div class="box">Grid 4</div> </div>

Code :CSS 

       <style>
            .container{
                grid:200px/ auto auto auto auto;
                display:grid;
            }
           .box{
               border:1px black solid;
               text-align:center;
           }
     </style>

Output:

2.grid-area

Thegrid-area is used to define the name grid-items. You can refer the name when setup the grid layout.

Here, Example

This grid layout contains 4 columns and three rows

Code :HTML

<div class="main">    <div class="item-1">Header</div>
    <div class="item-2">Sidebar</div>
    <div class="item-3">Main</div>
    <div class="item-4">Footer</div>
 </div>

Code :CSS 

       <style>
            .item-1{grid-area:header;}
            .item-2{grid-area:sidebar;}
            .item-3{grid-area:main;}

            .item-4{grid-area:footer;}
            .main{
                display: grid;
                grid:
                    'header header header header'
                    'sidebar main main main'
                    'footer footer footer footer';
                    grid-gap:5px 2px;
            }
           .main div{
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                border:1px black solid;
                padding:50px;
           }
     </style>

Output:

The grid-area property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

Syntax: 

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Make "grid1" start on row 2 column 1, and span 1 rows and 4 columns:

.grid1 { grid-arear: 2 / 1 / span 1 / span 4;}

2:             grid-row-start

1:         grid-column-start

span 1: grid-row-end

span 4: grid-column-end

3.grid-auto-columns

You can define the length or with of column using grid-auto-columns 

Syntax: grid-auto-columns: auto|max-content|min-content|length;

4.grid-auto-flow

5.grid-auto-row