CSS Grid

Grid property offers a layout system which contains row and columns.With the help of rows and columns it makes easier to design a web page without using float and position properties.

An HTML element becomes a grid if that element sets the property display:grid in style section.

Syntax

.className{
    display: grid;
}

Let's see the use of CSS grid properties.

<!DOCTYPE html>   
<html>   

<head>   

    <style>   
        .container {   
            display: grid;   
            grid: auto auto / auto auto auto auto;   
            grid-gap: 10px;   
            background-color: black;   
            padding: 10px;   
        }   

        .contain {   
            background-color: red;   
            text-align: center;   
            color: #fff;  
            padding: 10px 10px;   
            font-size: 20px;   
        }   
    </style>   
</head>   

<body>     
    <div class="container">   
        <div class="contain">Box1</div>   
        <div class="contain">Box2</div>   
        <div class="contain">Box3</div>      
        <div class="contain">Box4</div>   
        <div class="contain">Box5</div>   
        <div class="contain">Box6</div>   
        <div class="contain">Box7</div>   
        <div class="contain">Box8</div>   
    </div>   

</body>   

</html>

Grid Layout Properties

These are the following properties of CSS grid layout.

grid
grid-area
column-gap
gap
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-cloumn-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

Conclusion

The CSS grid layout spec allows us to create complex web design layouts with ease while writing simpler and more maintainable CSS code. We no longer have to use float or other such properties when creating complex layouts. The possibilities are endless.

CSS Grid

Table of contents

Conclusion