Display Grid 
display: grid;
display: inline-grid;

To make a grid container. Block or inline level. All children inside container become grid-items.

Grid CSS
grid-auto-rows 
grid-auto-rows: size;
grid-auto-columns: size;

To implicity (automatically) add new rows or columns;

Grid CSS
grid-template-areas 
grid-template-areas: 'myArea myArea';
grid-area: myArea;

Use naming conventions to set grids and place items.

Grid CSS
justify-items | align-items 
justify-items: ; // positions grid items left to right
Values:
start     - aligns grid items to the left side of the grid area 
end       - aligns grid items to the right side of the grid area 
center    - aligns grid items to the center of the grid area 
stretch   - stretches all items to fill the grid area 


align-items: ; // positions grid items from top to bottom
Values:
start     - aligns items to the top side of the grid area
end       - aligns items to the bottom side of the grid area 
center    - aligns items to the center of the grid area 
stretch   - stretches all items to fit the grid area

Position how grid items should fit inside it's grid area.

Grid CSS
grid-template 
grid-template-columns: ;   
grid-template-rows: ; 
grid-template: grid-template-rows / grid-template-columns;  

Values:
fr                        // defines a fraction of a grid
repeat(amount, size)      // a function to create columns and rows
repeat(amount, size size) // to add two columns or rows at a time 
minmax(size, size)        // first size always used, second depending on grid size 
auto-fill                 // fits as many possible columns as possible on a row
auto-fit                  // fits whatever columns there are into the space, stretching the columns  

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  // responsive grid

Specify the number of columns and rows.

Grid CSS
grid-auto-flow 
grid-auto-flow: row;          // new items should fill rows
grid-auto-flow: column;       // new items should fill columns
grid-auto-flow: row dense;    // dense fills holes earlier if smaller items are added   
grid-auto-flow: column dense;

Information

Grid CSS
justify-self | align-self 
justify-self: ;
align-self: ;

Same as justify-items but independent.

Grid CSS
align-content 
align-content: ;

Values:
start
end
center
space-between
space-around

place-self: align-self / justify-self;

To align the grid rows inside the container.

Grid CSS
gap 
column-gap: ;
row-gap: ;
gap: row-gap column-gap;

To add space between columns and rows.

Grid CSS
grid-column 
grid-column-start: ;
grid-column-end: ;
grid-column: 1/-1; // use all columns or rows

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end ;

Define which columns to place a grid item.

Grid CSS
grid-row 
grid-row-start: ;
grid-row-end: ;
grid-row: ;

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end ;

Define which rows to place a grid item.

Grid CSS
justify-content 
justify-content: ;

Values:
center
start
end
space-between
space-around
space-evenly
stretch

place-self: align-self / justify-self;

To align the grid inside the container.

Grid CSS