Modern CSS: Grid, Flexbox & Layouts

The Evolution of CSS Layouts

CSS layout has evolved significantly. From floats and positioning hacks to Flexbox and CSS Grid, modern CSS provides powerful tools for building responsive layouts. Understanding these tools allows you to build layouts that work beautifully across all devices.

Flexbox Fundamentals

Flexbox is perfect for one-dimensional layouts—items arranged in rows or columns with automatic spacing and alignment.

/* Create a flex container */
.container {
  display: flex;
  flex-direction: row; /* or column */
  justify-content: space-between; /* main axis alignment */
  align-items: center; /* cross axis alignment */
  gap: 1rem; /* spacing between items */
}

.item {
  flex: 1; /* grow equally */
  min-width: 0; /* allow shrinking below content size */
}

Key Flexbox properties:

• justify-content: Aligns items along the main axis (flex-start, center, space-between, space-around)
• align-items: Aligns items along the cross axis
• flex-wrap: Allows items to wrap to next line
• gap: Spacing between items (supported in modern browsers)

CSS Grid Mastery

CSS Grid excels at two-dimensional layouts where you control both rows and columns explicitly.

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

/* Named grid areas for complex layouts */
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
}

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

The Auto-Fit Magic: The grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) pattern creates responsive grids without media queries.

Container Queries

Container queries allow styling based on container size, not viewport size—a game changer for component-based development:

/* Define container */
.card-container {
  container-type: inline-size;
}

/* Style based on container size */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Advanced Techniques

Aspect Ratio: Maintain consistent proportions without padding hacks:

.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Sticky Positioning: Elements that stick while scrolling:

.header {
  position: sticky;
  top: 0;
  z-index: 10;
}

Conclusion

Modern CSS provides incredible power for building responsive, maintainable layouts. Flexbox and Grid, combined with container queries and other modern features, enable you to create beautiful designs that work on any screen size.