The Essential Cheat Sheet for Understanding Grid Properties

.container {
display: grid;
display: inline-grid;
}

.container{
grid-template-columns:
1fr 1fr 1fr;
grid-template-columns: 
100px 200px 150px;
grid-template-columns: 
repeat(3, 100px);
grid-template-columns: 
repeat(3, minmax(100px, 1fr));
}

.container{
grid-template-rows: 
50px 20% 1fr;
grid-template-rows: 
1fr 1fr 1fr;
grid-template-rows: 
repeat(3, 150px);
}

.container{
grid-gap: 30px;
grid-gap: 5% 12%;
grid-gap: 4rem 2em;
grid-gap: 2% 12px
}

.container{
grid-column: auto auto;
grid-column: 1 / 3;
grid-column: span 3;
grid-column: 1 / span 4;
}

.container{
grid-row: auto;
grid-row: span 2 / 5;
grid-row: inherit;
grid-row: 2 / -3;
grid-row: initial;
}

.container{
justify-content: center; 
justify-content: start; 
justify-content: end; 
justify-content: flex-start; 
justify-content: flex-end; 
justify-content: left; 
justify-content: right;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: inherit;
}

.container{
align-items:normal;
align-items: start;
align-items: end;
align-items: center;
align-items: flex-start;
align-items:  flex-end;
align-items: inherit;
align-items: baseline;
align-items: first baseline;
align-items: last baseline;
}

.container{
justify-items: normal;
justify-items: left;
justify-items: right;
justify-items: start;
justify-items: end;
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;
justify-items: center;
justify-items: flex-start;
justify-items:  flex-end;
justify-items: inherit;
}

.container{
grid-template-areas: none;
grid-template-areas: "a b";
grid-template-areas:
  "a b b"
  "a c d";
grid-template-areas: "header sidebar"
"main footer";
}

.container{
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;
grid-auto-rows: 100px;
grid-auto-rows: 10%;
grid-auto-rows: 0.5fr;
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: fit-content(400px);
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows:minmax(100px, auto) 
minmax(max-content, 2fr) 
minmax(20%, 80vmax);
}

.container{
grid-coumn-gap: 8px;
grid-column-gap: 4%;
grid-column-gap: 3rem;
grid-column-gap: 2em;
}

.container{
grid-row-gap: 3rem;
grid-row-gap: 12px;
grid-row-gap: 5%;
grid-row-gap: 2em;
}