Modern CSS Layout Techniques

The Evolution of CSS Layout

CSS has come a long way from the days of floats and tables. Modern CSS provides powerful layout systems that make creating responsive, flexible designs easier than ever.

CSS Grid: Two-Dimensional Layouts

CSS Grid is perfect for creating two-dimensional layouts where you need control over both rows and columns.

Basic Grid Setup

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

This creates a three-column grid with equal-width columns and consistent spacing.

Responsive Grid with Auto-Fit

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

This automatically adjusts the number of columns based on available space - no media queries needed!

Grid Areas for Complex Layouts

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  gap: 1rem;
}

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

Flexbox: One-Dimensional Layouts

Flexbox excels at distributing space along a single axis and aligning items.

Centering Content

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Flexible Navigation

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

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

Card Layout with Equal Heights

.card-container {
  display: flex;
  gap: 1rem;
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-content {
  flex: 1;
}

Combining Grid and Flexbox

The real power comes from using both together:

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

/* Flexbox for navigation items */
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

Modern CSS Features

Container Queries

Container queries let components respond to their container’s size instead of the viewport:

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Subgrid

Subgrid allows nested grids to inherit parent grid tracks:

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

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

Best Practices

1. Use Grid for page-level layouts - Grid excels at creating overall page structure
2. Use Flexbox for component layouts - Perfect for navigation, cards, and smaller UI elements
3. Embrace modern features - Don’t be afraid to use cutting-edge CSS
4. Test across browsers - Always verify your layouts work everywhere
5. Think mobile-first - Start with mobile designs and enhance for larger screens

Conclusion

Modern CSS layout tools have made web design more powerful and accessible than ever. By mastering Grid and Flexbox, you can create sophisticated, responsive layouts without relying on frameworks or JavaScript.

The key is understanding when to use each tool and how they complement each other. Practice these techniques, and you’ll be creating beautiful, flexible layouts in no time!