forum

home / developersection / forums / css grid layout module

Ask Question
Anonymous User

Software Developer Trainee

I am a content writter !

Follow
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!

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy