Interactive Guide to CSS Flexbox & Grid

Master Modern CSS Layouts

An interactive guide to CSS Flexbox and Grid. Go beyond static text and learn by doing with live, hands-on examples.

Browser Support (Production Ready)

Flexbox

98%+ global support

Grid

95%+ global support

Interactive Fundamentals

Click on the properties below to see how they affect the layout in real-time.

Flexbox Playground

Flexbox is a **one-dimensional** layout method for arranging items in rows or columns.

.container { display: flex; }

justify-content (main axis)

align-items (cross axis)

flex-direction

Grid Playground

Grid is a **two-dimensional** layout system, perfect for layouts with both rows and columns.

.container { display: grid; }

grid-template-columns

gap

justify-items

Practical Examples

See how Flexbox and Grid are used to build components from a real landing page.

Navigation Bar (Flexbox)

Flexbox is perfect for aligning a logo to the left and navigation links to the right in a single line.

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

Hero Section (Flexbox)

A two-column layout is easily achieved with Flexbox. `flex: 1` allows both columns to grow and take up equal space.

.hero-container {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.hero-content { flex: 1; }
.hero-image { flex: 1; }

Features Section (Grid)

Grid excels at creating responsive card layouts. `repeat(auto-fit, minmax(100px, 1fr))` automatically adjusts the number of columns based on screen size.

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

Common Layout Patterns

Explore classic layouts you can build with Flexbox and Grid.

Vertically Centered

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

Sticky Footer

Header

Main content area that pushes the footer down.

Footer

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

Holy Grail Layout

Header

Nav

Main

Aside

Footer

.container {
  display: grid;
  grid-template: "header header header" auto
                 "nav main aside" 1fr
                 "footer footer footer" auto
                 / 1fr 3fr 1fr;
}

Exercises & Challenges

Put your knowledge to the test. Click to expand each challenge.

Create a simple navigation bar with a logo on the left and menu items on the right. Use Flexbox. It should be responsive.

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

Create a responsive card grid using CSS Grid. It should have 3 columns on desktop, 2 on tablet, and 1 on mobile.

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(1, 1fr); }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }

Create the classic three-column layout with a header and footer that span the full width. Use CSS Grid and `grid-template-areas`.

.container {
  display: grid;
  min-height: 100vh;
  grid-template-areas: 
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}