Custom properties (--*): CSS variables

display:grid 
display:inline-grid 
display: subgrid;

grid-template-columns:1fr 1fr 1fr; 
grid-template-columns: auto auto auto;
grid-template-columns: auto 1fr auto;
grid-template-columns: 1fr auto 50px;
grid-template-columns: 200px auto 50px;
grid-template-columns: repeat(4, 1fr); /* this is the same as grid-template-columns: 1fr 1fr 1fr 1fr; */

grid-template-rows:1fr 1fr 1fr 1fr; 
grid-template-rows: repeat(2, 300px); /* this is the same as grid-template-rows: 300px 300px; */
grid-template-rows: auto auto auto;

grid-auto-rows /* Use the grid-auto-rows property to set a default size (height) for all rows. */
grid-auto-columns /* Use the grid-auto-columns property to set a default size (width) for all columns. */

grid-area: 1/2/3/4  ( grid-row-start, grid-column-start, grid-row-end, grid-column-end)

grid-column-gap:10px;
grid-row-gap:10px;
grid-gap: 10px;
grid-gap: 10px 20px;

// Grid Lines
// The lines between columns are called column lines.
// The lines between rows are called row lines.

grid-row-start: 1;
grid-row-end: 5;

grid-column-start: 1;
grid-column-end: 3;

// For grid column item
grid-column: 2/4 
grid-row: 1/3
grid-column: 1 / span 3;


grid-template-areas 

// The justify-content property is used to align the whole grid inside the container.
// Note: The grid's total width has to be less than the container's width for the justify-content property to have any effect.
// w3schools.com/css/css_grid_container.asp
justify-content: space-evenly
justify-content: space-between;
justify-content: space-around;
justify-content: center;
justify-content: end;
justify-content: start;

// The align-content property is used to vertically align the whole grid inside the container
align-content: center;
align-content: space-evenly;
align-content: space-around;
justify-content: space-between;
align-content: start;
align-content: end;

It is possible to name the grid lines so you don’t have to count which grid line you need to reference. These names can be declared as optional parameters in the grid-template-columns and grid-template-rows property.

.grid-container {
  display: grid;
  grid-template-columns: 150px [col-foo] 150px 150px [col-bar];
  grid-template-rows: 150px [row-foo] 150px [row-bar];
}

.item {
  grid-column-start: col-foo;
  grid-column-end: col-bar;
  grid-row-start: row-foo;
  grid-row-end: row-bar;
}

.grid-container {
  display: grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container {
  display: grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr) minmax(70px, 1fr));
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}