#web design notes

display: grid; - This property gives the user the ability to use all of the properties associated with CSS Grid, which are listed below. 

grid-template-columns: - adds columns to the grid; The number of columns is determined by the number of parameters. The value of these parameters indicate the width of each column (see the ‘Other Important Information’ section below for what units of measurement to use). 

Example: grid-template-columns: 10fr 10fr 10fr; 

This example creates 3 different columns within the grid, each with a width of 10px. 

grid-template-rows: - adds rows to the grid; The number of rows is determined by the number of parameters. The value of these parameters indicate the height of each row (see grid-template-columns for an example, and the ‘Other Important Information’ section below for what units of measurement to use).

grid-column-gap: - creates an empty space between all of the columns

grid-row-gap: - creates an empty space between all of the rows

grid-gap: - a shorthand option for grid-row-gap and grip-column-gap; If only one value is input, it will create a gap of that width/height between all of the rows and columns. If two values are input, the 1st value will set the gap between rows and the 2nd value will set the gap between columns.

grid-column: - this property controls the amount of columns an item will affect; use in with the vertical line numbers you want the item to start and end at. 

Example: grid-column: 1/3px;

This example makes the item start at the 1st vertical line and span to the 3rd vertical line of the grid, consuming 2 columns. 

grid-row: - this property controls the amount of rows an item will affect; use in with the horizontal line numbers you want the item to start and end at (see grid-column for an example).

justify-self: - aligns contents position within the cell vertically

stretch - fills the whole width of the cell; default

start - aligns contents at the left of the cell

center - aligns the contents in the center

end - aligns contents at the right of the cell 

align-self: -  aligns contents position within the cell horizontally; uses the same options as justify-self

justify-items: - use to align everything in the grid vertically;  uses the same options as justify-self

align-items: - use to align everything in the grid horizontally;  uses the same options as justify-self

grid-template-areas: - use to group cells of the grid together; use a period to indicate an empty cell in the grid

Example: grid-template-areas:              “header header header”                                    “advert content content”                                    “footer footer footer” 

This example merges the top 3 cells into an area named “header, the bottom 3 cells into an area named footer, and the middle 3 into 2 different areas, advert and content

grid-area: - places items in grid areas

When using with grid-template-areas:

Example: .item1 { grid-template-areas: *use template from grid-template-areas example*;   grid-area: header; }

This example makes all changes in the item1 class go to the “header” area (the top row, in this example)

When using without grid-template-areas, use the grid area equation* to define the area you want the item1 class to affect

Example: .item1 {grid-area: 1/1/2/4;}

repeat() - allows the user to repeat the values of grid-template-columns and grid-template-rows as many times as needed; To use, inside the parenthesis specify how many times you want to repeat your column or row, add a comma, then add the value you want to repeat

Example: grid-template-rows: repeat(100, 50px); 

This example creates 100 rows with a height of 50 px

Example 2: grid-template-columns: repeat(2, 1fr 50px) 20px;

This example creates two columns 1fr wide, two columns 50px wide, and one column 20px wide. 

minmax() - limits the size of an item when the container changes size; to be used with grid-template-rows or grid template-columns

Example: grid-template-columns: 100px minmax(50px, 200px);

This example creates two columns, the 1st 100px wide and the second anywhere between 50px and 200px wide.

auto-fill - inserts as many rows or columns of the users desired size as possible within a container; If a container can’t fit all items, it will automatically move whatever doesn’t fit down to a new row. When the size of the container exceeds the size of all of the items combined, it keeps inserting empty rows or columns and pushes the items to the side; To be used with the repeat property

Example: repeat(auto-fill, minmax(60px, 1fr);

This example makes it so that when the container changes size, the setup keeps inserting 60px columns until the container can’t fit anymore. 

auto-fit -  inserts as many rows or columns of the users desired size as possible within a container; If a container can’t fit all items, it will automatically move whatever doesn’t fit down to a new row. When the size of the container exceeds the size of all of the items combined, it collapses any empty rows or columns and stretches the items to fit the remainder of the container; To be used with the repeat property (see auto-fill property for an example).

Other Important Information

Units of measurement used to define the size of the grid-template rows and columns - 

fr - sets the size to a fraction of the available space

auto - sets the width/height automatically

% - adjusts to the percent of the width/height of the container

* The ‘grid area equation’ is just a name I made up for this set up, I’m not sure what the real name for it is, if it has one.

Important Definitions

Lines -  the hypothetical horizontal and vertical lines that create the grid 

Cells - the boxes in a grid that are formed by the vertical and horizontal lines intersecting