Day 13 - Digging Deeper into CSS - Grid Layout
Tags: html, css, codenewbie
Published: 2019-11-12 04:05:12

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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout), 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](https://css-tricks.com/snippets/css/complete-guide-grid/).

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 <code>div</code>. You set the columns to <code>grid-template-columns: 200px 200px 200px;</code>. What you will get is a grid with 3 columns and however many rows necessary to fit the remaining <code>div</code>.

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 <code>grid-auto-rows</code> and <code>grid-auto-columns</code>.

**Auto Placement**
When you create your <code>grid-template</code>, the default way for the items to be laid out is in a row.  For example, if you have 6 <code>div</code> in 3 columns, it will be laid out as such.

<code>1 2 3
4 5 6</code>

You can change the layout with <code>grid-auto-flow</code> without changing the source code.  If you give it a value of column, the items will be laid out like this now.

<code> 1 3 5
2 4 6</code>

We know that we can use <code>grid-auto-columns</code> and <code>grid-auto-rows</code> to set the size of implicit grid items. However, if you want to set how they are placed, you can use the <code>grid-auto-flow</code> property. The available values are <code>row</code>, <code>column</code> as seen above and <code>dense</code>.

**Auto-Fill & Auto-Fit**

<code>auto-fill</code>: 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 <code>auto-fill</code> with <code>minmax()</code>.

<code>auto-fit</code>: works almost identically to<code>auto-fill</code>. The only difference is that when the container's size exceeds the size of all the items combined, <code>auto-fill</code> keeps inserting empty rows or columns and pushes your items to the side, while <code>auto-fit</code> collapses those empty rows or columns and stretches your items to fit the size of the container.
 
**Alignment**

<code>justify-content</code> moves the entire grid (all the grid-items) within the grid container. This property aligns the grid along the row axis.

<code>align-content</code> moves the entire grid (all the grid items) within the grid container. This property aligns the grid along the column axis. 

<code>justify-items</code> aligns grid items along the inline (row) axis. 

<code>align-items</code> aligns grid items along the block (column) axis.

**Anonymous Items**
This is when you have text that isn't in a <code>div</code> 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...