CSS Grid Layout Module

What are CSS Grid Layout Module in HTML & CSS?


Last updated:7/20/2021 1:34:14 AM

1 Answers

Ethan Karla
Ethan Karla

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Let's have a look on the below code :

<!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 code will be helpful for you.

Happy Coding!

Answer