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

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.