CSS modern layout patterns with grid and flexbox

Need common layout patterns implemented with modern CSS Grid and Flexbox.

Modern CSS layout recipes:

/* 1. Holy Grail Layout */
.layout {
  display: grid;
  grid-template: 
    "header  header  header" auto
    "sidebar content aside" 1fr
    "footer  footer  footer" auto
    / 200px  1fr     200px;
  min-height: 100dvh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

@media (max-width: 768px) {
  .layout {
    grid-template:
      "header" auto
      "content" 1fr
      "sidebar" auto
      "aside" auto
      "footer" auto
      / 1fr;
  }
}

/* 2. Auto-fit card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* 3. Centered content with max-width */
.content-wrapper {
  width: min(90%, 1200px);
  margin-inline: auto;
  padding-block: 2rem;
}

/* 4. Sticky footer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
main {
  flex: 1; /* Takes remaining space */
}

/* 5. Equal height columns */
.columns {
  display: flex;
  gap: 1rem;
}
.column {
  flex: 1; /* Equal width */
  /* Children are equal height automatically */
}

/* 6. Masonry-like with columns */
.masonry {
  columns: 3 300px;
  column-gap: 1rem;
}
.masonry > * {
  break-inside: avoid;
  margin-bottom: 1rem;
}

/* 7. Sidebar that collapses */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.with-sidebar > :first-child {
  flex-basis: 250px;
  flex-grow: 1;
}
.with-sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 60%;
}

/* 8. Aspect ratio box */
.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Grid and Flexbox solve layout problems that used to require hacks (floats, absolute positioning, table layouts). These patterns cover 90% of common layout needs.

CSS layout for web applications