CSS has evolved tremendously in recent years. Gone are the days of struggling with floats and absolute positioning. CSS Grid and Flexbox have revolutionized how we create layouts. In this article, I'll show you how to use these powerful tools to create modern, responsive layouts.

Understanding the difference

Before we dive in, let's clarify what each tool is best for:

• Flexbox: One-dimensional layouts (rows or columns)
• CSS Grid: Two-dimensional layouts (rows and columns simultaneously)

Think of Flexbox as arranging items in a line, and Grid as arranging items in a table-like structure.

Flexbox basics

Flexbox makes it easy to align and distribute space among items in a container. Here's the basic setup:

.container {
  display: flex;
  justify-content: space-between; /* Horizontal alignment */
  align-items: center; /* Vertical alignment */
}

The key properties for flex containers:

• flex-direction: row, column, row-reverse, column-reverse
• justify-content: flex-start, center, flex-end, space-between, space-around, space-evenly
• align-items: stretch, flex-start, center, flex-end, baseline
• flex-wrap: nowrap, wrap, wrap-reverse

For flex items:

• flex-grow: How much the item should grow
• flex-shrink: How much the item should shrink
• flex-basis: The initial size of the item

CSS Grid fundamentals

Grid gives you precise control over both rows and columns. Start with a basic grid:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Three columns */
  grid-template-rows: 100px auto 100px; /* Three rows */
  gap: 20px; /* Space between grid items */
}

Grid terminology:

• Grid Container: The parent element with display: grid
• Grid Items: The direct children of the grid container
• Grid Lines: The lines that divide the grid
• Grid Tracks: The rows and columns
• Grid Cells: The intersection of a row and column
• Grid Areas: Rectangular areas spanning multiple cells

Grid template areas

One of my favorite Grid features is template areas, which let you create layouts visually:

.grid-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 60px 1fr 60px;
  gap: 10px;
}

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

Responsive grids with auto-fit and auto-fill

Create responsive grids that adapt to different screen sizes:

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

/* For smaller screens */
@media (max-width: 600px) {
  .responsive-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

Combining Grid and Flexbox

These tools work great together. Use Grid for the overall page layout, and Flexbox for component-level alignment:

/* Page layout with Grid */
.page-layout {
  display: grid;
  grid-template-areas:
    "nav header"
    "nav main";
  grid-template-columns: 200px 1fr;
}

/* Component alignment with Flexbox */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

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

Grid vs Flexbox: When to use which

Use Flexbox when you need:

• To align items in a single row or column
• Content-based sizing
• Simple, one-dimensional layouts

Use CSS Grid when you need:

• Two-dimensional layouts
• Precise control over positioning
• Complex, multi-row/column layouts
• Grid-based designs

Browser support and fallbacks

Both Grid and Flexbox have excellent browser support (over 95%), but you might want fallbacks for older browsers:

/* Fallback for very old browsers */
.container {
  display: block;
}

/* Modern browsers */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Common layout patterns

Here are some common layouts you can create:

Holy Grail Layout:

.holy-grail {
  display: grid;
  grid-template-areas:
    "header header header"
    "left main right"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Card Grid:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

CSS Grid and Flexbox have transformed how we approach layouts. They give us the tools to create complex, responsive designs with clean, maintainable code. Start with Flexbox for simpler layouts and reach for Grid when you need more control. The combination of both gives you unlimited layout possibilities.