Responsive Grids, Zero Media Queries

Media queries for every breakpoint? Tedious. Grid auto-fit/auto-fill creates responsive layouts automatically. Items reflow based on space available.

The Magic Formula

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

/* That's it! Fully responsive without media queries
   Items wrap automatically based on available space */

repeat(auto-fit, minmax(250px, 1fr))

Breaking it down:
- repeat(): Create columns
- auto-fit: As many columns as fit
- minmax(250px, 1fr): Min 250px, max 1 fraction

Wide screen (1200px):
┌───────┬───────┬───────┬───────┐
│  250  │  250  │  250  │  250  │  (4 columns)
└───────┴───────┴───────┴───────┘

Medium screen (800px):
┌───────┬───────┬───────┐
│  266  │  266  │  266  │  (3 columns)
└───────┴───────┴───────┘

Small screen (500px):
┌───────┬───────┐
│  250  │  250  │  (2 columns)
└───────┴───────┘

Tiny screen (300px):
┌───────┐
│  300  │  (1 column, stretches to fill)
└───────┘

Automatic reflow!

auto-fit vs auto-fill

3 items, wide screen:
┌──────────┬──────────┬──────────┐
│   Item   │   Item   │   Item   │
└──────────┴──────────┴──────────┘
Each item expands to fill width

3 items, wide screen:
┌─────┬─────┬─────┬─────┬─────┐
│Item │Item │Item │     │     │
└─────┴─────┴─────┴─────┴─────┘
Items stay minimum width

/* Use auto-fit when:
   You want items to stretch and fill space */
.gallery {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Use auto-fill when:
   You want consistent item sizes, allow empty space */
.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Real-World Examples

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

.gallery img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

/* Responsive without media queries!
   Desktop: 4-5 columns
   Tablet: 2-3 columns
   Mobile: 1 column */

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

.product-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* auto-fill ensures cards stay ~300px
   Extra space on right if not enough items */

“Removed 200 lines of media query CSS. One line with auto-fit replaced it all. Product grid now works perfectly from 320px to 4K displays. CSS Grid is magic.”

Responsive Components, Not Just Pages

Media queries check viewport width. Component in sidebar? Full width? Same breakpoint fails. Container queries check parent width.

The Problem with Media Queries

/* Card component */
.card {
  display: flex;
}

@media (max-width: 768px) {
  .card {
    flex-direction: column; /* Stack on mobile */
  }
}

Problem:
- Card in sidebar (300px): Still horizontal! (viewport > 768px)
- Card full width (800px): Stacked! (viewport < 768px)
- Component doesn't know its own width

Container Queries Solution

/* Define container */
.sidebar,
.main-content {
  container-type: inline-size;
  container-name: card-container;
}

/* Card adapts to parent width */
.card {
  display: flex;
}

@container card-container (max-width: 400px) {
  .card {
    flex-direction: column;
  }
}

Result:
- Card in 300px sidebar: Stacked ✓
- Card in 800px main: Horizontal ✓
- Component responds to ITS container, not viewport

Real Example: Product Card

/* Container setup */
.product-grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* Card base style */
.product-card {
  display: grid;
  grid-template-areas: 
    "image"
    "title"
    "price"
    "button";
}

/* When container > 300px: Horizontal layout */
@container (min-width: 300px) {
  .product-card {
    grid-template-areas: 
      "image title"
      "image price"
      "image button";
    grid-template-columns: 120px 1fr;
  }
}

/* When container > 500px: Full horizontal */
@container (min-width: 500px) {
  .product-card {
    grid-template-areas: "image title price button";
    grid-template-columns: 150px 1fr auto auto;
    align-items: center;
  }
}

/* Font size scales with container */
.card h2 {
  font-size: clamp(1rem, 5cqw, 2rem);
}

/* Padding relative to container */
.card {
  padding: 2cqi;
}

@supports (container-type: inline-size) {
  /* Container query styles */
}

/* Fallback for older browsers */
@media (max-width: 768px) {
  /* Media query fallback */
}

"Rebuilt our component library with container queries. Same card component works perfectly in sidebar, grid, full-width. No more variant props for different layouts. True responsive components."

Fluid Typography That Just Works

Writing 5 media queries for font sizes? clamp() does it in one line. Responsive typography perfected.

The Old Way (Painful)

h1 { font-size: 24px; }

@media (min-width: 640px) { h1 { font-size: 32px; } }
@media (min-width: 768px) { h1 { font-size: 40px; } }
@media (min-width: 1024px) { h1 { font-size: 48px; } }
@media (min-width: 1280px) { h1 { font-size: 56px; } }

The New Way (Elegant)

h1 {
  font-size: clamp(24px, 5vw, 56px);
}

/* Syntax: clamp(minimum, preferred, maximum) */

/* Font size:
   - Never smaller than 24px (mobile)
   - Scales with viewport (5vw = 5% of viewport width)
   - Never larger than 56px (desktop)
*/

/* Hero heading */
h1 { font-size: clamp(2rem, 6vw, 5rem); }

/* Body text */
p { font-size: clamp(1rem, 2vw, 1.25rem); }

/* Spacing */
.container { padding: clamp(1rem, 5vw, 3rem); }

/* Width */
.article { max-width: clamp(320px, 90vw, 800px); }

“Deleted 47 media queries, replaced with clamp(). Typography scales perfectly on all devices. Code is 70% smaller and easier to maintain.”

Browser Support: 96% (all modern browsers). Fallback: font-size: 2rem; font-size: clamp(1.5rem, 4vw, 3rem);

/* Style form if it has an error */
form:has(.error) {
  border: 2px solid red;
}

/* Style card if image is loading */
.card:has(img[loading]) {
  opacity: 0.5;
}

/* Style container if checkbox is checked */
.container:has(input:checked) {
  background: green;
}

Browser Support: 88% (all modern browsers, no IE)

Previously: Required JavaScript. Now pure CSS.

Cascade Control

!important is tech debt. @layer organizes CSS priority cleanly.

@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer base {
  body { font-family: sans-serif; }
}

@layer components {
  .button { background: blue; }
}

@layer utilities {
  .mt-4 { margin-top: 1rem; }
}

/* Utilities always win, no !important needed */

Benefit: Utility classes beat components. Components beat base. Predictable, maintainable.

.glass-panel {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

Note: backdrop-filter is the magic property that blurs everything behind the element.

.card-container { container-type: inline-size; }
@container (min-width: 400px) {
  .card { display: flex; flex-direction: row; }
}

Why? Now your card component can be placed in a sidebar or a main feed and it will style itself correctly based on where it sits, not how big the screen is.

.container { display: grid; grid-template-rows: repeat(3, auto); }
.card { 
  display: grid; 
  grid-template-rows: subgrid; 
  grid-row: span 3; 
}

This tells the card to inherit the row sizing of its parent, ensuring all headers, bodies, and footers align perfectly across the entire row.

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb {
  background: #3498db;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: #2980b9; }

Why? It’s a small detail that makes your web app feel ‘finished’ and high-end.

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #eee; /* Placeholder */
}

The Result: The browser reserves the space before the content arrives, resulting in a smooth, professional loading experience.