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

gene c
gene c
13,630 Points
Posted by gene c
gene c
13,630 Points

CSS Grid: I can set the length of some grid-areas to min-content or max-content. What does each of these mean?

I tried reading up on it.

Guides mentioned:

max-content: Represents the largest max-content contribution of the grid items occupying the grid track.

min-content: Represents the largest min-content contribution of the grid items occupying the grid track.

But i still don't get it? Hope someone can help me out. Thank you.

1 Answer

yk7
seal-mask
.a{fill-rule:evenodd;}techdegree
yk7
Full Stack JavaScript Techdegree Student 22,891 Points
yk7
.a{fill-rule:evenodd;}techdegree
yk7
Full Stack JavaScript Techdegree Student 22,891 Points

As I understood it, max-content is just a max size that we allow a content to take;

  • Like this page on which you are reading right now, the max-width= 1200px, and no matter how big the screen 24"- 27" 32", the width won't get bigger than 1200px. (try it yourself, no matter how you try to make the window big the white background content will stop at same level <---.--->).
  • In other words, you want something(container) to become big responsively but not that big!
  • And if we are on a small screen it's the other way, it's not the max but the min-width.

I hope that cleared little bit! cheers :)