Responsive CSS

Combining clamp() + @media

Fluid values and structural breakpoints working together.

The mental model

clamp()

values that scale

  • font-size
  • padding, margin
  • gap
  • container width
+
@media

structure that changes

  • column count
  • flex-direction
  • display: none/block
  • component shape

Demo 1 — Hero section

clamp() handles fluid type and spacing. @media switches the layout from stacked to side-by-side at 580px. 

/* clamp: values scale smoothly */
.hero    { padding:   clamp(1.5rem, 5vw, 4rem); }
.hero h2 { font-size: clamp(1.3rem, 4vw, 2.6rem); }

/* @media: layout changes at 580px */
@media (min-width: 580px) {
  .hero       { flex-direction: row; }
  .hero-image { display: block; }
}

Hello, world

This heading and padding scale with clamp(). The layout switches to two columns above 580px via @media. Resize to see both at work.

Get started
image

Demo 2 — Card grid

Gap and card padding scale with clamp(). The column count changes with @media.

.grid {
  gap: clamp(0.6rem, 2vw, 1.25rem);  /* fluid gap */
  grid-template-columns: 1fr;         /* 1 col default */
}
@media (min-width: 500px) {
  .grid { grid-template-columns: 1fr 1fr; }  /* 2 col */
}

Gap is fluid via clamp · Columns switch via @media at 500px

Design

Card with fluid padding and font size from clamp().

Develop

Card with fluid padding and font size from clamp().

Deploy

Card with fluid padding and font size from clamp().

Iterate

Card with fluid padding and font size from clamp().

Quick reference

GoalTool
Font size scales smoothly clamp()
Spacing breathes with the viewport clamp()
Container has a min and max width clamp()
Layout switches from 1 to 2 columns @media
Navigation collapses on mobile @media
Sidebar hidden on small screens @media
Hero: fluid type + layout switch both
Card grid: fluid gap + column changeboth