CSS Responsive Grid with No Media Queries

Achieving a CSS responsive grid with no media queries was previously nearly impossible without the use of JavaScript. Now, with the CSS Grid Layout features, you can construct a simple, flexible, and fully responsive CSS grid without the use of media queries.

You may still end up using media queries to refine a few things about the aesthetics of the grid, but the basic effect can be achieved with a few lines of CSS and no media queries.

The HTML looks as follows, with a simple container and grid items:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <!-- etc... -->
</div>
Code language: HTML, XML (xml)

And here is the CSS grid code:

.container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.item {
  width: 100px;
}
Code language: CSS (css)

I’ve omitted the CSS that is for aesthetic purposes only, but you can view the full code in the CodePen below. If you want to view the full effect when resizing the window, open the demo in a new window and resize the window. You can also resize the preview window in CodePen, when viewing the demo in editor mode.

You can adjust the value inside the minmax() function if you want to change where the breaks occur when the viewport size changes.