CSS - Brief Grid Layout - Part 2

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:

.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.

.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.

If you want to play around with justifying and aligning, I will put the Code Pen.

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.

.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-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.

.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;
}

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, W3School and CSS Tricks.

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