CSS Grid Layout Tutorial
Published: 2024-05-18 04:04:49

## OVERVIEW
The Grid Layout is the most powerful CSS layout scheme.
It divides the web page into a grid and the different grids can be combined arbitrarily to create various layouts. Previously, the effects could only be achieved through a complex CSS framework, however, it is built into the browser.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0askmrap3e0dh5h6swvb.png)

The layout like the one in the above picture is exactly where the grid layout excels.

The grid layout and the flex layout have certain similarities, which can specify the positions of multiple items inside the container. However, there are also significant differences between them.

The flex layout is the axis layout, which can only specify the position of the "item" relative to the axis and can be regarded as one-dimensional. the grid layout divides the container into "rows" and "columns", generating cells, and specifying the cell where the "item" is located, which can be regarded as a two-dimensional layout. the grid layout is much more powerful than the flex layout.

## basic concept

The area adopting the grid layout is called a 'container'. the child elements positioned in the grid inside the container are called 'items'.

```html
<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>
```
in the above code, the outermost <div> element is the container, and the three inner <div> elements are the items.

notice: the item can only be the top-level child elements of the container and not include the child elements of the item.
For example, the <p> element isn't the item in the above code. the grid layout only takes effect on items.

the horizontal area inside the container is called a "row", and the vertical area is called a "column".


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vonxrwgvct6v6bjtzos.png)

in the above picture, the horizontal dark area is the "row", and the vertical dark area is the "column".

### cell

The intersection area of the row and the column is called a "cell".

under the circumstances, n rows and m columns will generate nxm cells. For example,3 rows and 3 columns will generate 9 cells.

### grid lines
The lines that divide the grid are called "grid lines". The horizontal grid lines divide the rows, and the vertical grid lines divide the columns.

under normal circumstances, there are n+1 horizontal grid lines in n rows and m+1 vertical grid lines in m columns. For example, there are four horizontal grid lines in three rows.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvhmuvi0dln5d5f52cg9.png)


## The properties of the container
The properties of the grid layout are divided into two categories. One category is defined on the container and is called container properties; the other category is defined on the item and is called item properties. the part first introduced the container properties.

### display
`display: grid` specifies a container adopting the grid layout.

```css

div {
  display: grid;
}
```
under default circumstances, the elements of the container are the block-level elements but they also can be set inline elements.

```css
div {
  display: inline-grid;
}
```
the above code specifies that the div element is an inline element, and the inside of the element uses a grid layout.

notice: that after setting the element as a grid layout, the settings such as float, display: inline-block, display: table-cell, vertical-align, and column-* of the container child elements (items) will become invalid.

### grid-template-columns and grid-template-rows

After the container specifies the grid layout. then we'll divide the container into rows and columns. the grid-template-columns attribute specifies the width of each column, and the grid-template-rows attribute specifies the height of each row.

```css
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
```
In the above code, it specifies a grid of three rows and three columns. column width and row height both being 100px


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dacdbnhbkfxk2fvct5qq.png)

In addition to using absolute units, percentages can also be used.

```css
.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
```

#### repeat()
sometimes, it's very troublesome to write the same value repeatedly, especially when there are many grids. at this time, we can use the `repeat()` function to simplify the repeated value. the above code is rewritten with repeat() as follows.

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
```
The `repeat()` function accepts two parameters, one parameter is the number of repetitions, and the other parameter is the value to be repeated.

#### auto-fill
sometimes, the size of the cell is fixed, but the size of the container is uncertain. if you want each row(or each column) to accommodate as many cells as possible,  then the auto-fill keyword can be used to indicate automatic filling.

```css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
```
the above code indicates the width of each column is 100px, then it is automatically filled until the container can no longer accommodate more columns.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gl1kj3qnfdtc2zmymn80.png) 

#### fr
in order to facilitate the representation of proportional relationships, the grid layout provides `fr` keyword. if the width of two columns is `1fr` and `2fr` respectively, it means that the latter is twice as much as the former.

```css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
```
the above code represents two columns of the same width.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8z4kutskf2o5f1h40n9o.png)

`fr` can be combined with the unit of the absolute length, and this will be very convenient.

```css

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
```

the above code represents that the width of the first column is 150px, and the width of the second column is half of that of the third column.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqtn65xfgj5g29via2rq.png)

#### minmax()
The `minmax()` function generates a range of lengths and represents that length is within this range. it accepts two parameters, namely the min value and the max value.
```css
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
```
in the above code, `minmax(100px, 1fr)` indicates that the width of the column is not less than 100px and not more than 1fr.

#### auto
The `auto` key indicates that the width of the column is determined by the browser.

```css

grid-template-columns: 100px auto 100px;
```

in the above code,  the width of the second column is basically equal to the maximum width of the cells in this column, unless the cells set the `min-width` attribute and the value is more than the biggest width.

#### layout instance
The `grid-template-columns` attribute is very useful for page layout. The two-column layout only requires one line code.

```css
.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
```

in the above code, the left column is set to 70%, the right column is set to 30%.

the traditional grid layout is very easy to write.
```css

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

### grid-row-gap, grid-column-gap, grid-gap

the `grid-row-gap` attribute sets the gap between rows, and the `grid-column-gap` attribute sets the gap between columns.

```css
.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
```

the `grid-gap` attribute is the combined shorthand form of `grid-column-gap` and `grid-row-gap` and the syntax is as follows.
```css
grid-gap: <grid-row-gap> <grid-column-gap>;
```
therefore, the above code of CSS is equivalent to the following code.

```css
.container {
  grid-gap: 20px 20px;
}
```
if `grid-gap` omitted the second value, the browser considers the second value to be equals to the first value.

according to the latest standard, the `grid-` prefix of the three attribute name has been remove, `grid-column-gap` and `grid-row-gap` are written as column-gap and row-gap, and grid-gap is written as gap.

#### justify-items, align-items
the `justify-items` attribute is used for setting the horizontal position of the cell content, the `align-items` attribute be used for setting the vertical position of the cell content.

```css
.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
```
the writing of the two attributes is exactly the same, and they can both take the following values.

```
start： align the starting edge of the cell
end： align the ending edge of the cell
center： center inside the cell
stretch： stretch and occupy the entire width of the cell(default value)
```
```css
.container {
  justify-items: start;
}
```
the above code indicates that the content of the cell is align-left, the effect is shown in the figure below.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d67qpc1k0h3f0l3f03i9.png)

```css
.container {
  align-items: start;
}
```
the above code indicates that the content of the cell is aligned at the top and the effect is shown in the figure below

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6uiiezbf7zlz3zg4ot1.png)

#### justify-content, align-content
the `justify-content` property is the horizontal position of the entire content area in the container, and the `align-content` property is the vertical position of the entire content area in the container.

```css
.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
```
the writing method of these two attributes is exactly the same, both can take the following values.

```css
start - align the starting border of the container
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2rss02wcrastfomdzfa.png)

```css
end - align the ending border of the container
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nd8jpwm5wpriwhppes1.png)

```css
center - center inside the container
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w151ln7b88ya7fpe9zfj.png)

```css
stretch - when the item size is not specified, it stretches to fill the entire gird container
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1b1jb51numpwxk2vctt.png)


### item attribute
These attributes are defined on the item.

#### grid-column-start, grid-column-end, grid-row-start, grid-row-end

The specific method is to specify on which grid lines the four borders of the item are respectively positioned.

```css
grid-column-start: the vertical grid line where the left frame is located
grid-column-end
grid-column-end: the vertical grid line where the right frame is located
grid-row-start: the horizontal grid line where the top frame is located
grid-row-end: the horizontal grid line where the bottom frame is located
```

```css
.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
```

the above code indicates that the left frame of the `item-1` is the second vertical grid line, and the right frame of the `item-1` is the fourth grid line.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqsmwg6o3t2mrbelt177.png)

in the above figure， we only specify the right frame of the `item-1`, but do not specify the top frame and the bottom frame, so it can adopt the default position that the top frame is the first grid line and the bottom frame is the second grid line.

except the `item-1`, the other items do not have a specified position and are automatically laid by the browser, at this time their position is determined by the `grid-auto-flow` attribute of the container, the default value of the attribute is `row`, so it will be arranged "row by row first and then column by column".

#### justify-self, align-self
the `justify-self` attribute sets the horizontal position of the cell content
the `align-self` attribute sets the vertical position of the cell content

```
start： align the starting edge of the cell
end： align the ending edge of the cell
center： center inside the cell
stretch： stretch and occupy the entire width of the cell(default value)
```
```css
.item-1  {
  justify-self: start;
}
```