# Grid Recap

This is a recap of the CSS Grid module covered in Web Dev I.

CSS Grid is used to create page layouts in two dimensional grids, using both columns and rows at the same time.

# Terms and defaults

# The container

To start working with grid we first need to set the grid container by adding display:grid to the parent element of the elements that we want to layout in a grid.

# Grid Template

A grid is comprised of rows and columns hence we have two properties to explicitly define the template of a grid gird-template-rows and grid-template-columns

We define the number of rows by supplying the height of each row to the grid-template-rows property. Example: grid-template-rows: 100px 200px; will create 2 rows with 100px and 200px height respectively.

We define the number of columns by supplying the width of each column to the grid-template-columns property. Example: grid-template-columns: 20% 30% 50%; will create 3 columns with 20%, 30%, and 50% width respectively.

Screenshot of the browser dev tools showing the grid layout with line number

# Auto rows and columns

When we have more items than we have cells in our grid or we have one or more items taking over multiple cells we might run out of the explicitly defined cells, in this case the overflowing items will create rows automatically and the height of these rows will not be defined hence it will be set to the height of the content of the items.

To deal with the issue that automatic height can create we can use the grid-auto-columns property to define the width of the automatically generate columns or grid-auto-rows property to define height of the automatically generate rows.

# Grid Template Areas

We can name each cell of the grid that we have created using grid-template-areas property. These names can be used to place the grid items in specific areas.

We will need to add a name for each cell in a row, if we want to skip over a cell we can use a period . as the value. Example:

grid-template-areas: 
"keys . brace" 
"mask note note";

In the above example we are adding the name keys to the first cell, leaving second cell without a name and then using brace for the third cell, the fourth cell is names mask and the last two cells are named the same as note.

We will be using these names for our items later.

Screenshot of the browser dev tools showing the grid area names

# Gap

The gap property can be used to add thickness to the grid lines, we can add individually add the value for the column lines using column-gap or row lines using row-gap. The value accepted by these properties is simply a number followed by a unit. Example: gap: 10px; will add a thickness of 10px to both row and column lines.

# Items Placement

We can place the items in different cells than the default first come first cell behavior, we can also place an item to occupy more than one adjacent cells. The three properties we can use for this are grid-column, grid-row, and grid-area

We can use the line numbers for out grid as values for grid-column and grid-row properties and use the area names for the value of grid-area property.

.product:nth-child(2){
  /* Start at column line 3 */
  grid-column: 3;
}
.product:nth-child(2){
  /* Start at line 2, go to line 6 */
  grid-column: 2 / 6;
}
.product:nth-child(2){
  /* Start at line 2, go to last line */
  grid-column: 2 / -1;
}
.product:nth-child(2){
  /* Start at line 2, span horizontally 3 rows */
  grid-column: 2 / span 3;
}

.product:nth-child(1){
  /* take the grid area with label keys */
  grid-area: keys;
}
.product:nth-child(2){
  /* take the grid area with label brace */
  grid-area: brace;
}
.product:nth-child(3){
  /* take the grid area with label mask */
  grid-area: mask;
}
.product:nth-child(4){
  /* take the grid area with label note */
  grid-area: note;
}

# Summary of Properties