CSS GRID LAYOUT

Template areas - What is this used for? What are the properties and values?

* You must put this in the container * grid-template-area: -The syntax is visual representation "h h h h h h" of the grid. Which means each string is "m m m c c" a row with a cell for each column. "f f f f f f" ** The amount of cells must match the amount of columns. ** grid-area: h; - This will make the header span the whole top row just as it's specified in the template area. * You can also use dots for blank cells, and the areas will only be valid if it's a rectangle. *

Creating a grid - What two main elements does a grid consists of? How do we turn a container into a grid? What properties define how are grid should look?

- A grid consists of two main elements. A container element which is usually a div element and the items which is the elements inside the container. - display: grid; In order to turn the container into a grid we must use the display property with a value of grid. - To define how are grid should look like we must specify the amount of columns and rows. This can be done with three properties - * grid-template-columns: * grid-template-rows: * grid-gap:

Fraction unit - What is a fraction unit in css. and what can it be used on?

- There is a better way to control the responsiveness of a grid. Css has something called a fraction unit. This will make all columns grow and shrink equally. - Basically means that it will split the grid into fractions based on the number of columns. - You can also make 1 column bigger by specifying the fraction unit as grid-template-columns: 1fr 2fr 1fr; This would split the columns into 4fr units with the second column being twice as big.

Columns and Rows shorthand - What is a simpler way to specify the amount of columns and rows? What is the shorthand property to define rows and columns?

- You can specify the amount of columns/ rows and their width/ height with the value: repeat(3, 1fr) - This specifies the amount of columns/rows as three with a width/height of 1fr. grid-template: - Is the shorthand for columns as rows. You can use the value - repeat(2, 100px) / repeat(3, 1fr) - The first repeat specifies for rows and the second one specifies for columns.

Named Lines - What is named lines used for? What do you have to do first in order to define the position of the items? What is the value you enter? How do you define where the item begins on the column or row line?

A new way to position and size items on a grid First you must define your grind, and then you can define the position of the items. Ex: grid-template-columns: 1fr [content-start] 5fr [content-end] Having a box with a value-start/end defines that the content block will start on the second line and end on the third. In return this allows you to put the value name as the value for the grid-column/ row instead of other values like span. Ex: grid-column: content; This also applies to row lines as well. If an items row lines and column lines are defined. Which means it's surrounded then you can use grid-area: content; instead

Auto-fit vs Auto-fill -

Auto-fit makes all the defined elements fit by making the explicit columns width 0 auto-fill instead will add new column tracks that are empty.

Shorthand for adjustments for grids - What are the two shorthand property for grid adjustments? What does specifying -1 mean? What are the values?

Shorthand - grid-column: 1/3; - The 1 specifies start line and the 3 is the last line it will go to. grid-row: 1/4; - The 1 specifies the start line and the 4 specifies the last line it will got too. ** You can also use -1 as your end which will make it go to the last column line no matter what.*** ** You must make sure there is space for an element to increase how much it can span across rows.**

Auto row - Why is this property and why do we need it?

Since we have made are columns responsive they will create explicit rows as the browser expands. So we must make are rows responsive as well. grid-auto-rows: 100px; - This will attack the explicit rows created by the auto-fit property, and let use define the height for all rows.

Size adjustments for grids - What properties would you use to span a header from the left all the way to the right? What are their values?

grid-column-start: 1; - This tells us where we want are header to start at, the value 1 defines that it should start at the first column line. grid-column-end: 3; - This tells us where we want the header to end at, the value 3 defines that is should end at the third column line.

Misc - What are some additonal values for grid-column/row? How do you fill blank cells? What are the two values it can take?

grid-columns/rows: auto - This will make the element start on whatever column line they were given initially. /span - This will make the element span as many column lines as you want without having to put auto. **Using these values can leave some cells blank. You can fill these spots with the property. - grid-auto-flow: * The default set is row dense- this will make it attempt to fill the holes in the grid.

Gaps - How do we specify the gap between each rows and columns?

grid-gap: 3px - The grid-gap property is used to specify the gap, between all rows and columns.

Columns - How do we specify the amount of columns our grid should have and their width?

grid-template-columns: 100px auto 100px; - The 3 different values specify the amount of columns there are, you can also add as many as you want. - The amount in pixels and percentages or even auto specify the width of each column.

Rows - How do we specify the amount of rows our grid should have and their height?

grid-template-rows: 50px 50px; - The two different values specify the amount of rows, and you can add as many as you want. - The amount in pixels or ems specify the height of the row.

Justify-items and Align-items - What do these properties do? What stretch does justify-items control? What are the values you can use with it? What stetch does align-items control? What values can it take?

These properties allow you to align and justify items along the grid. justify-items: - The x-axis is controlled by this property. stretch; this if the default value. If you don't want the items to stretch you can use these values. center; This will make it stretch to the center. start: this will only make it stretch to the left. end: This will only make it stretch to the right. align-items - This controls the items stretch across the y-axis. center; centers it end; squeezes them towards the bottom. start - squeezes them to the top. You can also use these properties on individual items instead.

Justify-content - align-content -

These properties allow you to move the move the containers columns and rows: Justify-content: controls how the grid moves along the x-axis. It has a couple values that can be paired with it. end - which shuffles all the content to the right. start - which is the default value and shifts all the content to the left. center - this centers it along the row axis. space-between - This gives as much space as possible between items. space-every - This spaces the items evenly between the x-axis space around-// align-content: This controls how the content moves along the y-axis. It has a couple values that can we pared with it. end - This makes the content sit at the bottom center - This centers the content

minmax - Why do we use this value?

We use the minmax() to get the behavior we want from the columns. Ex: grid-template-columns: repeat(auto-fit, minmax(100px, 1fr); This will make the columns fit the entire grid regardless of whether the container exactly adds up to 100px. *This helps with responsivness*

Auto-fit - Why would we use this value?

You want the amount of columns to vary with the width of the container. In order to do this we substitute our value for columns with a values of auto-fit. Ex: grid-template-columns: repeat(auto-fit, 100px) This will make the amount of columns vary with the width of the grid. To simply put its trying to fit as many columns into the container as possible. *Setting the width to 1fr will kill the responsiveness so we use the minmax() property.*