Grid Layout

Code

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Responsive without media queries */
.auto-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Explanation

CSS Grid creates two-dimensional layouts with rows and columns. The fr unit distributes free space, and grid-template-areas name regions for intuitive placement. auto-fit with minmax produces responsive grids that reflow without media queries.

More CSS3 Snippets