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.
Here’s how you can use this:
1. To make an HTML element into a grid container, you use the `display: grid` or `display: inline-grid` property.
```
.container {
display: grid;
}
```
1. You can set the size of your rows and columns:
```
.container {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px;
}
```
In this example, your grid will have three columns that are each 50px wide, and two rows that are each 50px tall.
1. Grid items are placed into the grid container in the order that they are declared in the HTML. You can manually position grid items with `grid-column` and `grid-row` properties, which define which column/row line your item should start and end at:
```
.item1 {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
```
In this example, the grid item would span the space from the second column line to the fourth column line and from the first row line to the third row line.
1. Grid-gap property can be used to add gaps between the rows and columns:
```
.container {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px;
grid-gap: 10px;
}
```
In the example above, the rows and columns will now have a 10px gap in between them.
1. You can repeat grid values for cleaner code using the `repeat()` function:
```
.container {
display: grid;
grid-template-columns: repeat(3, 50px);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
}
```
In this example, `repeat(3, 50px)` is used to create three 50px columns in a more concise way.
1. For dynamic number of rows/columns, you can use the `fr` unit, which represents a fraction of the available space:
```
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
```
In this example, this will create three columns of equal width, no matter the width of the grid container.
