Responsive Layouts with CSS Grid

Auto-fit/fill, named areas, responsive breakpoints, and common patterns

What You’ll Build

After following this guide, you will have a working implementation of responsive layouts with css grid in your project. Master CSS Grid for building responsive layouts without media queries. The auto-fit/auto-fill pattern with minmax() creates fluid grids that automatically adjust columns. Named grid areas make complex layouts readable and maintainable.

Use Cases & Problems Solved

• Implement interactive UI features that users expect from modern apps
• Follow established patterns that scale and remain maintainable
• Reduce boilerplate and avoid common frontend pitfalls

Prerequisites

• Basic HTML and CSS knowledge

Step-by-Step Implementation

Auto-responsive card grid (no media queries!)

The following snippet shows how to auto-responsive card grid (no media queries!). Copy this into your project and adjust the values for your environment.

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

/* Cards automatically wrap: 1 col on mobile, 2 on tablet, 3+ on desktop */

Holy grail layout with named areas

The following snippet shows how to holy grail layout with named areas. Copy this into your project and adjust the values for your environment.

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 250px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}

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

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

⚠️ Don’t Do This

.col { float: left; width: 33.333%; } /* Clearfix hacks needed */
.row::after { content: ''; display: table; clear: both; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
/* No clearfix, no float issues, built-in gaps */

Testing

Verify your implementation with these tests:

// __tests__/responsive-layouts-with-css-grid.test.ts
import { describe, it, expect } from 'vitest';

describe('Responsive Layouts with CSS Grid', () => {
  it('should initialize without errors', () => {
    // Test that the setup completes successfully
    expect(() => setup()).not.toThrow();
  });

  it('should handle the primary use case', async () => {
    const result = await execute();
    expect(result).toBeDefined();
    expect(result.success).toBe(true);
  });

  it('should handle edge cases', async () => {
    // Test with empty/null input
    const result = await execute(null);
    expect(result.error).toBeDefined();
  });
});

Verification

# Open your page and resize the browser window
# Cards should automatically reflow from 3 → 2 → 1 columns
# No media query breakpoints needed for the auto-fill grid
# Test on mobile viewport in DevTools