---
title: "CSS Grid Layout Module"  
description: "CSS Grid Layout Module"  
author: "Anonymous User"  
published: 2021-07-20  
updated: 2021-07-20  
canonical: https://www.mindstick.com/forum/156562/css-grid-layout-module  
category: "css-css3"  
tags: ["html", "css-css3"]  
reading_time: 3 minutes  

---

# CSS Grid Layout Module

What are [CSS Grid](https://www.mindstick.com/articles/336043/css-grid-advanced-techniques) [Layout](https://www.mindstick.com/articles/12853/android-layout-and-its-type) [Module](https://www.mindstick.com/blog/11796/prestashop-one-page-checkout-module-make-checkout-faster) in [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) &[amp](https://www.mindstick.com/forum/156207/what-is-amp); CSS?

\

## Replies

### Reply by Anonymous User

[Grid](https://www.mindstick.com/forum/369/how-can-i-add-a-column-name-to-my-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!


---

Original Source: https://www.mindstick.com/forum/156562/css-grid-layout-module

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
