Step by step: grid layout CSS
Tags: css, webdev, beginners, tutorial
Published: 2021-10-24 03:07:44

---
canonical_url: "https://www.thangphan.xyz/posts/step-by-step-grid-layout-css/"
---
Grid helps us lay the content out in an effective way. The element is laid out in rows and columns. When we need to customize the complex layout, grid is so powerful.

In order to consider grid, we're going to learn some basic CSS that we can do in grid, and make a demo using it together.

Let's dig in!

### Make it grid

This is the code in order to demo the CSS property in Grid:

{% codesandbox grid-yx7mx %}

1. grid-template-columns

By default, Grid element behaves as the normal flow, and it doesn't make any effects for the layout. Using **grid-template-columns** we can now divide the element into many columns.

Some values we need to consider using _grid-template-columns_:

. 1fr: 1 fraction, make the width of the element as wide as possible until no available space exists.

. auto: the width is decided by the content that it contains.

. `xxx`px: we can define a specific value for the column width.

_How can we add the space between the elements?_

Grid already had the **gap** property for us. Specifically, you can use grid-row-gap, grid-column-gap.

2. grid-auto-columns

Sometimes, our grid was created in an implicit way, without using `grid-temlate-columns`. As an escape hatch, we can use `grid-auto-columns` in order to set the size for the column of the child element.

Take a look at the second example above.

3. number of grid

Assuming, I have the layout as below, I would like to define the position that the element's width will be.

![Grid Layout Using Number](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ys47l2v9etv1ptzlo0ut.png)
Fortunately, Grid supports it. We can define the start position, the end position for the element using grid-row-start, grid-row-end, or a brief property grid-row.

- The `Column 1` element's width starts from number `1` and ends at `3`.
- The `Column 2` element's width automatically is the remaining width.
- The `Column 3` element's width starts from number `1` and ends at `3`.

4. grid-area

Using **grid-area** we can point exactly what place the element will be, instead of we define the start position and the end position of the element.

I'm going to use `grid-area` to make the layout below.

![Grid Area Layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azuign7ooxdzv23gl33d.png)

Based on the layout above, We have this assertion:

- The layout need to have two columns.
- The layout need to have three rows.

Next, I need to define the label of the element. These are `header`, `nav`, `main`, and `footer`.

```css
.header {
  grid-are: header;
}

...
```

And then combine them using `grid-template-areas`:

```css
grid-template-areas:
  'header header'
  'nav main'
  'footer footer';
```

5. repeat, minmax

It is very helpful if you don't know how many elements you have . If you don't know, you only need to make it repeat with the same layout.

Sometimes, you also want to make the element have a specific minimum width, and that element's width can be opened wider more than the minimum width.

Assuming, I would like to have seven columns, the first six columns have equal width in the range `50 px - 100 px`. And the last column is in the rage `100px - 1fr`.

I can use `repeat` to make the first six columns, and `minmax` to make the range width, the remaining column only needs to use `minmax`.

```css
grid-template-columns: repeat(6, minmax(50px, 100px)) minmax(100px, 1fr);
```

### Conclusion

We just learned about Grid in CSS, it is powerful CSS that we can use and make customizing the complex layout become easier than ever. Why don't pick some layout and use the power of grid for your website?