CSS Grid

display: grid;

display: inline-grid;

grid-template-columns: repeat(3, 1fr);

grid-template-columns: 1fr 2fr 1fr;

grid-template-columns: 12px auto 12px;

grid-template-columns: repeat(auto-fill, minmax(18px, 1fr));

grid-template-rows: 1fr 1fr;

grid-template-rows: 1fr 3fr;

grid-template-rows: 12px auto;

grid-template-rows: 30% 70%;

grid-template-areas:
  "head head"
  "side main"
  "foot foot";

grid-template-areas:
  "head head"
  "main side"
  "foot side";

grid-template-areas:
  "side head"
  "side main"
  "side foot";

grid-template-areas:
  "head head"
  "main main"
  "side foot";

gap: 1px;

gap: 8px;

row-gap: 8px;
column-gap: 1px;

row-gap: 1px;
column-gap: 10px;

justify-items: start;

justify-items: end;

justify-items: center;

justify-items: stretch;

align-items: start;

align-items: end;

align-items: center;

align-items: stretch;

place-items: center;

place-items: start end;

place-items: end start;

place-items: stretch center;

justify-content: start;

justify-content: end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

align-content: start;

align-content: end;

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

grid-auto-flow: row;

grid-auto-flow: row dense;

grid-auto-rows: 12px;

grid-auto-rows: 1fr;

grid-auto-rows: 8px 20px;

grid-auto-rows: minmax(12px, auto);

grid-column: 1 / 3;

grid-column: span 3;

grid-column: 2 / -1;

grid-column: 2 / span 1;

grid-row: 1 / 3;

grid-row: span 3;

grid-row: 2 / 4;

grid-row: 2 / span 1;

grid-area: 1 / 1 / 3 / 3;

grid-area: 2 / 2 / 4 / 4;

grid-row: 1 / span 2;
grid-column: 2 / span 2;

grid-area: 1 / 1 / 4 / 2;

justify-self: start;

justify-self: end;

justify-self: center;

justify-self: stretch;

align-self: start;

align-self: end;

align-self: center;

align-self: stretch;

place-self: center;

place-self: start end;

place-self: end start;

place-self: end;

order: -1;

order: 1;