# Create a responsive grid layout with just 1 line of CSS

URL: https://theosoti.com/short/one-liner-responsive-layout/
Published: 2025-02-28
Author: Theo Soti

> Responsive layouts in one line of CSS? Discover the power of flexible, media-query-free design for seamless adaptation to any screen.

## Achieve responsive layouts now with one line of CSS

Let’s analyse the magic behind grid-template-columns:

1. Repeat()

- repeat(x, value): generates multiple columns or rows with the same pattern.
- auto-fit: automatically adjusts the number of columns based on available space.

2. minmax(min(100%, 18.75rem), 1fr)

- min(100%, 18.75rem): ensures the column never exceeds 18.75rem but also doesn’t exceed the container’s width.
- minmax(..., 1fr): Sets a minimum size while allowing columns to grow and evenly fill available space.

Why this work so well?

- No media queries needed.
- Thanks to min(100%, 18.75rem), elements won’t exceed their container.
- Automatically adapts to different screen sizes and layouts.
- One line does all the work!

All these functions (repeat, minmax, min) have more than 96% browser support.

This one-liner is perfect for card layouts, galleries, and grids that need to be both structured and flexible.

Have you used this approach or a similar one before?
Let’s discuss in the comments!

```html
<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
```

```css
.container {
  display: grid;
  gap: 1rem;

  /* this line does it all */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
}

.card {
  height: 12.5rem;
  background: #fff;
  border: 4px solid #000;
}
```

Codepen link: https://codepen.io/theosoti/pen/WbNomqr

One-line responsive grids are ideal for content collections where item count changes often. The value is not just shorter CSS; it is predictable wrapping behavior with fewer breakpoint-specific overrides.

Layout features like this provide real value when components move between narrow and wide containers. Testing nested contexts early prevents brittle breakpoint rules.

A practical way to adopt `minmax()` is to scope it to one high-impact component first. Then reuse that same pattern in similar contexts so behavior stays consistent and review time stays low.

---

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!