Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Grid Layout Flexible Sized Grids Flexible Track Sizing with minmax()

Posted by Zach Handler
.a{fill-rule:evenodd;}techdegree
Zach Handler
Web Development Techdegree Student 5,332 Points

How do you set a max number of columns in css grid?

I'm trying to create a flexible layout with grid, where there is one column on small screens and up to five columns on wider screens. How do I set the max number of columns to five?

2 Answers

jb30
jb30
44,805 Points

You could set the maximum width of your grid container to five times the minimum width of each column.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 1000px;
}
Zak Erving
Zak Erving
22,832 Points
Zak Erving
Zak Erving
22,832 Points

You'll have to use media queries in your CSS to accomplish this.