Well, I got busy the past 3 days and got sick but I am back.
For some reason, this was a much easier concept to learn.
What is the Grid layout? On MDN, it is defined as "a two-dimensional grid system to CSS". What that means is that with this system you have access to the column and the row unlike Flexbox where you have access to the column or the row.
This is not an all inclusive list of all the properties as the goal of this is to deepen my knowledge of concepts I didn't understand enough the first time. For a full list, you can check out CSS Tricks.
As with Flexbox, there is the idea of the "Grid Container" and the "Grid Items" meaning certain properties are applied to the container and other to the items.
As you are creating the grid, you may set the value for the column or the row only and let's say that you have 8 div. You set the columns to grid-template-columns: 200px 200px 200px;. What you will get is a grid with 3 columns and however many rows necessary to fit the remaining div.
This is what is called "Implicit Track" and "Explicit Track".
Implicit track - How the grid organizes when the column or row is not set.
Explicit track - How the grid organizes when the column or row is set
The FR Unit
This is a unit for the Grid Layout that creates flexible units without calculating percentages. This is amazing for responsiveness. It represents a fraction of the available space in the Grid Container.
Minmax() Function
Used to limit the size of items when the grid container changes size. This is especially useful when you use grid-auto-rows and grid-auto-columns.
Auto Placement
When you create your grid-template, the default way for the items to be laid out is in a row. For example, if you have 6 div in 3 columns, it will be laid out as such.
1 2 3
4 5 6
You can change the layout with grid-auto-flow without changing the source code. If you give it a value of column, the items will be laid out like this now.
1 3 5
2 4 6
We know that we can use grid-auto-columns and grid-auto-rows to set the size of implicit grid items. However, if you want to set how they are placed, you can use the grid-auto-flow property. The available values are row, column as seen above and dense.
Auto-Fill & Auto-Fit
auto-fill: This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining auto-fill with minmax().
auto-fit: works almost identically toauto-fill. The only difference is that when the container's size exceeds the size of all the items combined, auto-fill keeps inserting empty rows or columns and pushes your items to the side, while auto-fit collapses those empty rows or columns and stretches your items to fit the size of the container.
Alignment
justify-content moves the entire grid (all the grid-items) within the grid container. This property aligns the grid along the row axis.
align-content moves the entire grid (all the grid items) within the grid container. This property aligns the grid along the column axis.
justify-items aligns grid items along the inline (row) axis.
align-items aligns grid items along the block (column) axis.
Anonymous Items
This is when you have text that isn't in a div or another element within a Grid Container. The text will react as a grid item as if it was wrapped in a container.
So far I have used both Flexbox and the Grid Layout in a project and I found for the page layout, I used the Grid Layout and for the rest of the page I was using Flexbox.
I'm due for another project tomorrow and I am going to be more mindful of the choices I make.
The streak continues...
Top comments (0)