Use This Simple Line Of CSS Grid To Make Your Layout Responsive

Published Mar 28, 2024

If you’re using CSS Grid for your layout, you can avoid writing a bunch of media queries with this simple line of CSS.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Let’s break it down:

  • repeat uses auto-fill as the repeat count to repeat the grid item as many times as needed
  • minmax specifies a minimum size of 200px, and maximum size of 1fr for the grid item

You could also use auto-fit instead of auto-fill, but what is the difference?

If you want to stretch the grid items to take the entire available space use auto-fit, otherwise use auto-fill.


You can subscribe on YouTube, or consider becoming a patron if you want to support my work.

Found a mistake?

Every post is a Markdown file so contributing is simple as following the link below and pressing the pencil icon inside GitHub to edit it.

Edit on GitHub