☷ CSS Grid

Grid vs. Flexbox

Flexbox is one-dimensional — it works along a single row or column. CSS Grid is two-dimensional — it controls both rows and columns at the same time. Use Flexbox for components (nav bars, card rows). Use Grid for overall page layouts.

Defining a Grid

display: grid activates Grid on a container. grid-template-columns defines the column widths. grid-template-rows defines row heights. The fr unit means "fraction of available space".

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 cols */
  grid-template-rows: auto 1fr;        /* 2 rows */
  gap: 1rem;
}

Grid Template Areas

Name grid areas to create visual page blueprints:

.layout {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }