CSS Grid & Flexbox: Complete Guide for Modern Layouts

CSS Grid and Flexbox revolutionized web layouts, making complex designs simple and responsive. This comprehensive guide teaches you when to use each, how they work, and provides real-world examples you can use immediately.

Grid vs Flexbox: When to Use Which

Use Flexbox When:

• Laying out items in a single dimension (row or column)
• Content size should determine layout (content-first design)
• Building navigation menus, toolbars, button groups
• Centering items vertically or horizontally
• Distributing space between items

Use Grid When:

• Creating two-dimensional layouts (rows AND columns)
• Layout should be defined first (layout-first design)
• Building page layouts, image galleries, dashboards
• Overlapping elements needed
• Complex alignment requirements

The short answer: Flexbox for components, Grid for layouts. But you'll often use both together!

Flexbox Complete Guide

Basic Flexbox

.container {
  display: flex;
}

This makes all direct children flex items, arranged in a row by default.

Flex Direction

.container {
  display: flex;
  flex-direction: row;              /* Default: left to right */
  flex-direction: row-reverse;      /* Right to left */
  flex-direction: column;           /* Top to bottom */
  flex-direction: column-reverse;   /* Bottom to top */
}

Justify Content (Main Axis)

Controls spacing along the main axis (horizontal by default).

.container {
  display: flex;
  justify-content: flex-start;      /* Default: start of line */
  justify-content: flex-end;        /* End of line */
  justify-content: center;          /* Centered */
  justify-content: space-between;   /* Space between items */
  justify-content: space-around;    /* Space around items */
  justify-content: space-evenly;    /* Equal space between/around */
}

Align Items (Cross Axis)

Controls alignment perpendicular to main axis (vertical by default).

.container {
  display: flex;
  align-items: stretch;     /* Default: fill container height */
  align-items: flex-start;  /* Top of container */
  align-items: flex-end;    /* Bottom of container */
  align-items: center;      /* Vertically centered */
  align-items: baseline;    /* Align by text baseline */
}

Perfect Centering

.container {
  display: flex;
  justify-content: center;  /* Horizontal center */
  align-items: center;      /* Vertical center */
  height: 100vh;            /* Full viewport height */
}

Flex Wrap

.container {
  display: flex;
  flex-wrap: nowrap;        /* Default: single line */
  flex-wrap: wrap;          /* Multiple lines */
  flex-wrap: wrap-reverse;  /* Multiple lines, reversed */
}

Gap (Spacing Between Items)

.container {
  display: flex;
  gap: 1rem;            /* Space between items */
  gap: 1rem 2rem;       /* Row gap, column gap */
  row-gap: 1rem;        /* Space between rows */
  column-gap: 2rem;     /* Space between columns */
}

Flex Item Properties

Flex Grow

How much an item should grow relative to others.

.item {
  flex-grow: 0;     /* Default: don't grow */
  flex-grow: 1;     /* Grow to fill space */
  flex-grow: 2;     /* Grow twice as much as flex-grow: 1 */
}

Flex Shrink

How much an item should shrink when space is limited.

.item {
  flex-shrink: 1;   /* Default: can shrink */
  flex-shrink: 0;   /* Don't shrink */
}

Flex Basis

Initial size before growing or shrinking.

.item {
  flex-basis: auto;     /* Default: use width/height */
  flex-basis: 200px;    /* Start at 200px */
  flex-basis: 50%;      /* Start at 50% of container */
}

Flex Shorthand

.item {
  /* flex: grow shrink basis */
  flex: 0 1 auto;      /* Default */
  flex: 1;             /* Shorthand for: 1 1 0 */
  flex: 1 0 200px;     /* Grow, don't shrink, start at 200px */
}

Align Self

Override container's align-items for specific item.

.item {
  align-self: auto;         /* Default: use container setting */
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: stretch;
}

Order

Change visual order without changing HTML.

.item {
  order: 0;     /* Default */
  order: -1;    /* Move to start */
  order: 1;     /* Move to end */
}

Flexbox Real-World Examples

Navigation Bar

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

Card with Header, Content, Footer

.card {
  display: flex;
  flex-direction: column;
  height: 400px;
}

.card-header,
.card-footer {
  flex-shrink: 0;  /* Don't shrink */
}

.card-content {
  flex-grow: 1;    /* Take remaining space */
  overflow-y: auto;
}

Responsive Grid with Flexbox

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.grid-item {
  flex: 1 1 300px;  /* Grow, shrink, min 300px */
}

Holy Grail Layout

.container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  display: flex;
  flex: 1;
}

aside {
  flex: 0 0 250px;  /* Fixed sidebar width */
}

article {
  flex: 1;  /* Fill remaining space */
}

CSS Grid Complete Guide

Basic Grid

.container {
  display: grid;
}

Grid Template Columns

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;  /* 3 fixed columns */
  grid-template-columns: 1fr 1fr 1fr;        /* 3 equal columns */
  grid-template-columns: 1fr 2fr 1fr;        /* Middle twice as wide */
  grid-template-columns: 200px 1fr 200px;    /* Fixed sidebars */
  grid-template-columns: repeat(3, 1fr);     /* Shorthand: 3 equal */
  grid-template-columns: repeat(3, 200px);   /* Shorthand: 3 fixed */
}

Grid Template Rows

.container {
  display: grid;
  grid-template-rows: 100px auto 100px;  /* Header, content, footer */
  grid-template-rows: repeat(4, 100px);  /* 4 rows, 100px each */
}

Gap (Grid Spacing)

.container {
  display: grid;
  gap: 1rem;            /* Space between cells */
  gap: 1rem 2rem;       /* Row gap, column gap */
  row-gap: 1rem;
  column-gap: 2rem;
}

Auto-Fit and Auto-Fill

Create responsive grids without media queries!

.container {
  display: grid;
  /* Fit as many 250px columns as possible */
  grid-template-columns: repeat(auto-fit, 250px);
  
  /* Better: allow columns to grow/shrink */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  
  /* auto-fill keeps empty columns, auto-fit collapses them */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

Grid Item Placement

By Line Numbers

.item {
  grid-column-start: 1;
  grid-column-end: 3;      /* Span 2 columns */
  
  /* Shorthand */
  grid-column: 1 / 3;      /* Start / End */
  grid-column: 1 / span 2; /* Start / Span */
  
  /* Rows work the same */
  grid-row: 1 / 3;
}

By Area Names

.container {
  display: grid;
  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; }

Alignment

.container {
  display: grid;
  
  /* Align items within cells */
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  place-items: center;  /* Shorthand: align and justify */
  
  /* Align grid within container */
  justify-content: start | end | center | space-between | space-around;
  align-content: start | end | center | space-between | space-around;
}

/* Align individual items */
.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  place-self: center;  /* Shorthand */
}

CSS Grid Real-World Examples

Page Layout

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr 60px;
  min-height: 100vh;
  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; }

Responsive Grid Gallery

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* Featured item spans 2 columns */
.featured {
  grid-column: span 2;
}

Dashboard Layout

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.widget-large {
  grid-column: span 6;  /* 50% width */
}

.widget-medium {
  grid-column: span 4;  /* 33% width */
}

.widget-small {
  grid-column: span 3;  /* 25% width */
}

Card with Overlapping Image

.card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 200px 1fr;
}

.card-image {
  grid-column: 1;
  grid-row: 1 / 3;  /* Span both rows */
}

.card-content {
  grid-column: 1;
  grid-row: 2;
  background: white;
  z-index: 1;  /* Above image */
}

Combining Grid and Flexbox

Use Grid for the overall layout, Flexbox for components within.

/* Grid for page layout */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

/* Flexbox for navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

/* Flexbox inside each card */
.card {
  display: flex;
  flex-direction: column;
}

.card-actions {
  display: flex;
  justify-content: space-between;
  margin-top: auto;  /* Push to bottom */
}

Responsive Design Patterns

Responsive Grid without Media Queries

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

/* Columns automatically adjust based on container width */

Responsive Layout with Media Queries

.container {
  display: grid;
  grid-template-columns: 1fr;  /* Mobile: single column */
  gap: 1rem;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 250px 1fr;  /* Tablet: sidebar + content */
  }
}

@media (min-width: 1200px) {
  .container {
    grid-template-columns: 250px 1fr 300px;  /* Desktop: + right sidebar */
  }
}

Responsive Flexbox

.container {
  display: flex;
  flex-direction: column;  /* Mobile: stack vertically */
  gap: 1rem;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;  /* Tablet+: horizontal layout */
  }
  
  .sidebar {
    flex: 0 0 250px;  /* Fixed width sidebar */
  }
  
  .main {
    flex: 1;  /* Fill remaining space */
  }
}

Common Patterns & Tricks

Full-Height Layout

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header, footer {
  flex-shrink: 0;
}

main {
  flex: 1;
}

Sticky Footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}

Equal Height Cards

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

/* Cards automatically stretch to same height */
.card {
  display: flex;
  flex-direction: column;
}

Centered Modal

.modal-backdrop {
  display: grid;
  place-items: center;  /* Center horizontally and vertically */
  position: fixed;
  inset: 0;
}

Browser Support

Both CSS Grid and Flexbox have excellent browser support:

• Flexbox: Supported in all modern browsers, including IE11 (with prefixes)
• CSS Grid: Supported in all modern browsers, IE11 with -ms- prefix (limited features)
• Gap property: Fully supported in all modern browsers (2021+)

Best Practices

• Use semantic HTML: Grid/Flexbox don't replace proper markup
• Mobile-first: Start with single-column, add complexity with media queries
• Prefer Grid for layout: More powerful for 2D layouts
• Prefer Flexbox for components: Better for 1D arrangements
• Use gap instead of margins: Cleaner, more maintainable
• Leverage auto-fit/auto-fill: Reduce media query complexity
• Test on real devices: Browsers handle edge cases differently

Learning Resources

• CSS-Tricks: Complete Guide to Flexbox
• CSS-Tricks: Complete Guide to Grid
• Flexbox Froggy (Interactive Game)
• Grid Garden (Interactive Game)

Conclusion

CSS Grid and Flexbox are powerful layout tools that belong in every developer's toolkit. Master both and you'll be able to:

• Build complex layouts with minimal code
• Create responsive designs without excessive media queries
• Center elements effortlessly
• Build maintainable, flexible layouts

Start with Flexbox for simpler layouts and components. Graduate to Grid when you need two-dimensional control. Use them together for maximum flexibility. Practice with real projects and the syntax will become second nature.