CSS Website Layout

Master modern layout techniques with CSS Grid and Flexbox

🏗️ Modern Website Layouts

Learn to create responsive, flexible website layouts using modern CSS techniques including CSS Grid, Flexbox, and container queries for professional web design. 


/* Modern layout with CSS Grid */
.website-layout {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}

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

Output:

Header
Sidebar
Main Content
Footer

Modern Layout Methods

🎯

CSS Grid

Two-dimensional layout system 

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
📐

Flexbox

One-dimensional flexible layouts 

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
📱

Container Queries

Component-based responsive design 

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}
🔧

Subgrid

Inherit parent grid structure 

.nested-grid {
  display: grid;
  grid-template-columns: subgrid;
}

🔹 Modern Responsive Layout

CSS Grid enables clean, modern layouts through a two-dimensional system of rows and columns. It allows precise item placement in both directions, simplifying complex designs like dashboards or galleries. Properties like grid-template-columns, gap, and fr units create responsive structures that rearrange without extra markup. This results in semantic HTML, robust accessibility, and SEO-friendly structured content. 

:root {
  --clr-primary: #3b82f6;
  --clr-bg: #fafafa;
  --clr-text: #1f2937;
  --shadow: 0 2px 10px rgb(0 0 0 / 0.1);
  --radius: 8px;
}

.layout {
  display: grid;
  grid-template: "header" auto
                "main" 1fr
                "footer" auto;
  min-height: 100vh;
  gap: 1rem;
  padding: 1rem;
  background: var(--clr-bg);
  color: var(--clr-text);
}

.header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.card {
  background: white;
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-2px);
}

.footer {
  grid-area: footer;
  padding: 1rem;
  text-align: center;
  background: var(--clr-primary);
  color: white;
  border-radius: var(--radius);
}

@media (min-width: 768px) {
  .layout {
    grid-template: "header header" auto
                  "nav main" 1fr
                  "footer footer" auto
                  / 250px 1fr;
  }
}

Output:

Logo
Card 1
Card 2
Card 3
Footer

🔹 Advanced Layout Patterns

Modern web apps use advanced patterns like Holy Grail, Card Grids, and Sidebar-Main layouts. These solve UI challenges such as sticky footers and equal-height columns with CSS Grid and Flexbox. Patterns enhance UX through consistent interfaces, improve SEO with clean HTML hierarchy, and boost performance compared to old float-based methods. They are maintainable, accessible, and adaptable across devices. 

/* Holy Grail Layout with CSS Grid */
.holy-grail {
  display: grid;
  grid-template: 
    "header header header" auto
    "nav main aside" 1fr
    "footer footer footer" auto
    / 200px 1fr 200px;
  min-height: 100vh;
  gap: 1rem;
}

/* Pancake Stack Layout */
.pancake-stack {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.pancake-header,
.pancake-footer {
  flex-shrink: 0;
}

.pancake-main {
  flex: 1;
}

/* Sidebar Layout with Toggle */
.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width, 0) 1fr;
  transition: grid-template-columns 0.3s ease;
}

.app-layout.sidebar-open {
  --sidebar-width: 280px;
}

/* Card Layout with Auto-fit */
.card-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 2rem;
  padding: 2rem;
}

/* Masonry-like Layout */
.masonry-layout {
  columns: 300px;
  column-gap: 2rem;
  padding: 2rem;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 2rem;
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Responsive Dashboard Layout */
.dashboard {
  display: grid;
  grid-template-areas:
    "stats stats stats"
    "chart table table"
    "recent recent activity";
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
}

.stats { grid-area: stats; }
.chart { grid-area: chart; }
.table { grid-area: table; }
.recent { grid-area: recent; }
.activity { grid-area: activity; }

@media (max-width: 1024px) {
  .dashboard {
    grid-template-areas:
      "stats stats"
      "chart chart"
      "table table"
      "recent activity";
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-areas:
      "stats"
      "chart"
      "table"
      "recent"
      "activity";
    grid-template-columns: 1fr;
  }
}

Output:

Statistics
Chart
Data Table
Recent Items
Activity Feed

🧠 Test Your Knowledge

Which CSS property is best for creating two-dimensional layouts?