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.
Top comments (0)