CSS Website Layout Patterns

Layout Techniques

Holy Grail layout: header, footer, main content, two sidebars.

Use CSS Grid for overall page structure.

Flexbox works well for navigation and components.

Sticky footer stays at bottom even with little content.

Responsive layouts adapt to different screen sizes.

/* Holy Grail Layout with Grid */
.page {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.aside {
  grid-area: aside;
}

.footer {
  grid-area: footer;
}

/* Responsive adjustment */
@media (max-width: 768px) {
  .page {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}