How Does CSS Grid Work?

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.item {
  grid-column: 1 / 3; /* span columns 1-2 */
  grid-row: 1 / 2; /* row 1 */
}

/* Or use span */
.wide {
  grid-column: span 2;
}

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

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

/* Named areas */
.layout {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}