forum

Home / DeveloperSection / Forums / CSS Grid Layout Module

Ask Question
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Anonymous User

Anonymous User

04-Aug-2021

Grid layout is used to design a web page that is based on the grid-layout module system, with everything in a row and column form. This makes it easier for the programmer to change position and float objects in a very easy and consistent way.

Let's have a look on the below code for better understanding of Grid Layout module: 

<!DOCTYPE html>

<html>

<head>

    <style>

        .wrapper {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 10px;

            grid-auto-rows: minmax(100px, auto);

        }

        .prop {

            border: 1px solid darkorange;

            background: #ffd0796e;

            border-radius: 2px;

        }

        .one {

            grid-column: 1 / 3;

            grid-row: 1/3;

        }

        .two {

            grid-column: 2 / 4;

            grid-row: 1 / 3;

        }

        .three {

            grid-column: 1;

            grid-row: 2 / 5;

        }

        .four {

            grid-column: 3;

            grid-row: 3;

        }

        .five {

            grid-column: 2/3;

            grid-row: 2/4;

        }

        .six {

            grid-column: 3;

            grid-row: 4;

        }

    </style>

</head>

<body>

    <div class='wrapper'>

        <div class='one prop'>One</div>

        <div class='two prop'>Two</div>

        <div class='three prop'>Three</div>

        <div class='four prop'>Four</div>

        <div class='five prop'>Five</div>

        <div class='six prop'>Six</div>

    </div>

</body>

</html>

Hope this will be helpful for you.

Happy Coding!

Liked By