CSS - Brief Grid Layout - Part 2
Tags: webdev, beginners, programming, css
Published: 2022-04-14 17:00:37

If you haven't read Part 1 yet, I recommend that you start there 😃. Last time, we discussed some common Grid Container CSS properties, so we will continue with some more... You might not know about these properties or perhaps forgot that you know it!

## More Grid Container Properties

We finished part 1 with `justify-items` and `align-items` which allow you to move the Grid Items inside the Grid Cells. There are also two other properties called `justify-content` and `align-content`, this might be confusing since they all sound so similar. But the way I remember it as, if you need to move the Grid Items, remember to include "items" in your justify or align properties. 👌

### Justify-content and Align-content

So how are they different? If you defined your rows and columns of the Grid Container and they end up being smaller than the Grid Container itself, then you will have the extra space. So, `justify-content` and `align-content` will move the rows and columns within the Grid Container as per the remaining spaces.

As mentioned previously, justifying will move things along the inline axis and aligning will move things along the block axis.

These are the options:

```CSS
.grid-container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

.grid-container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

```

I will be building on the previous example.

Example - Firstly, I have changed the size of the rows and columns so that there are space inside the Grid Container to move the rows and columns around. I have added `justify-content: space-around`, and `align-content: space-evenly`. 

```CSS

.grid-container {
  background: #222;
  width: 50vw;
  height: 80vh;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: 
    "first first second"
    "third . fourth"
    "fifth sixth .";
  justify-items: center;
  align-items: center;
  justify-content: space-around;
  align-content: space-evenly;
}

```

The image below will show you the outline of each cells with their name in the cells. And you will notice the spaces between each cells, this is due to the above properties setting the rows to space out evenly and the columns to space-around the free space.

![Grid container with labeling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t80ouhghv4tn23q53nai.png)

If you want to play around with justifying and aligning, I will put the [Code Pen](https://codepen.io/Katakung95/pen/abEaYaj).

### Grid-auto-columns and Grid-auto-rows

The `grid-auto-columns` and `grid-auto-rows` defines the size of the rows and columns of the Grid Cells that lies outside of your defined Grid Cells using Grid Template. It is almost like setting a **default size** for the rows and columns which is automatically generated for overflowing Grid Items.

Example - Here, I define the 2 columns of size `100px` using `grid-template-columns`. Then, I set the `grid-auto-columns` and `grid-auto-rows`, this means that any Grid Items place outside of the defined columns will be the size `1fr` and any rows will be size `150px`. You can see where I have placed two Grid Items, one at the 4th column and one at 4th row.
 
```CSS
.grid-container {
  background: #222;
  width: 50vw;
  height: 80vh;
  display: grid;
  grid-template-columns: 100px 100px;
  grid-auto-columns: 1fr;
  grid-auto-rows: 150px;
}

.grid-item.c {
  grid-column: 4;
  background: orange;
}

.grid-item.e {
  grid-row: 4;
  background: #06d;
}

```

![Grid container showing auto rows and columns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7q2v0889vkbvm4rdnq46.png)
 
### Grid-auto-flow and gap

The `grid-auto-flow` property allow you to choose the flow direction of the Grid Item, the default is row, which is why you see the grid filling the cells from left to right then wrap to a new row. You can set the flow to column and it will go top to bottom, then wrap to a new column.

Another property I have included in the example is `gap`, this allow you to set the **gutter** between each Grid Cells, this works only for inside, between the cells and not the edges. It takes the usual units in CSS. `gap` is a combination of `row-gap` and `column-gap` so you can set them individually if you prefer.

Example - Changing flow direction to column and adding gutter between cells of `20px`.

```css

.grid-container {
  background: #222;
  width: 50vw;
  height: 80vh;
  display: grid;
  grid-template-columns: 100px 100px;
  grid-auto-columns: 1fr;
  grid-auto-rows: 150px;
  grid-auto-flow: column;
  gap: 20px;
}

```

![Grid Container with grid auto flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7p57lrns8z2n92qvocty.png)

## Summary 

I think that wraps it up for today, we talked about how to arrange the rows and columns within the Grid Container if there are available space using `justify-content` and `align-content`. We looked how to set the "default" size for grid rows and columns using `grid-auto-rows` and `grid-auto-columns`, this could be useful for when you are not sure how many Grid Items you will have. Lastly, we looked at how to change the flow of the Grid Items using `grid-auto-flow` and how to include gaps between the rows and columns.

Remember that this is just a brief overview of each properties. There are some properties which I have left out and shorthand properties that combine multiple properties at once. If you want to learn more, additional details can be found at [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid), [W3School](https://www.w3schools.com/css/css_grid.asp) and [CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/).

Let me know in the comments if you have any feedback, or if I have misunderstood anything.

![Rock Lee smiling](https://64.media.tumblr.com/853776844c0aea0074b7907782574a55/81cc4a3bdb98614d-89/s500x750/0fc8ab5f8c267bccc2070e637607a087f4df2bb6.jpg)