Responsive grids without queries in CSS

auto-fit and minmax give you a responsive card grid in one declaration.

.cards {
  display: grid;
  grid-template-columns: repeat(
    auto-fit, minmax(min(18rem, 100%), 1fr)
  );
  gap: 1rem;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: 0.5rem;
}

How it works

1. auto-fit drops empty tracks, auto-fill keeps them.
2. minmax sets the smallest and largest a track may be.
3. min() keeps it from overflowing a narrow phone.

Keywords and builtins used here

• cards
• display
• gap
• grid
• min
• minmax
• rem
• repeat
• tiles

The run, in numbers

Lines

13

Characters to type

211

Tokens

66

Three-star pace

80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 50 seconds.

Type this snippet

Step 4 of 7 in Grid, step 10 of 24 in Flexbox & grid.

← Previous Next →