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 trialZach Handler
Web Development Techdegree Student 5,332 PointsHow 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
44,806 PointsYou 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
22,832 PointsYou'll have to use media queries in your CSS to accomplish this.