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.

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.

Support

If you want to support the content you're reading or watching on YouTube consider becoming a patreon starting low as 1$ per month.

Become a patreon
Subscribe For Updates
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