Min & Max Content Sizing in CSS Grid — 1/3 Flexibility

33 thoughts on “Min & Max Content Sizing in CSS Grid — 1/3 Flexibility

  1. You're amazingly awesome. The best teacher i found on YouTube. Please do a video on "box-sizing" it would really help us to understand box-sizing. Looking forward your response. Thank you

  2. I am just starting out self-learning web development and Jen you are a gem!. Watching all your vids.

  3. I'm confused about how some of the elements landed on the grid where they did. For e.g., the first <p> – why does it start in the 2nd column? Why do some elements span multiple columns? I'm going to monkey around with this and figure it out, but I wish there was a video that explained max-content with a simpler example, or a video just like this but with more explanations. Not in-depth explanations, but just some more quick statements about the code so that learners could use those statements as pointers to areas we want to research more. Like, "this does this because row is set to auto" (or something). Jen is a fantastic teacher, though – I really like the pace she talks at and the words she chooses. But, in this case, I would have liked a simpler example to demonstrate max-content.

  4. Your depth of thoughts and the atmosphere generated in your videos are like… Carl Sagan talking about CSS. Love it.

  5. You give so much context! After watching your video, I feel like I can put "CSS Programmer / Web Designer / Print Designer / History of Typography Expert / Design Doktor / And Much More" in my resume. Your content is above the rest! Thank you!

  6. This is the only place I've seen the difference between min- and max-content actually described so I can understand it, thank you very much

  7. I'm a little stuck using this approach:
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)) – the default width and height of a single or double letter element is 38x38px e.g A, B, C, D… or Aa, Ab, Ac, Ad etc

    I am trying to create a pagination component using grid, but running into a problem where I want any long text to fill the space it needs:

    A B C D E (etc, all the way to) Z (then also be able to have free text for things like) Advanced Search (or any other long text)

    This is the current working demo:
    https://codepen.io/MaxWeir/full/gZwwpY

  8. I love your videos! I need to boost my skills as a designer and the passion and knowledge you share these videos are really contagious. Thank you!

  9. I am from Russia, my English is bad, unfortunatelly…And I can`t watch not Russian video, But your spearch is beautiful! I understand everything! Thanks a lot!

  10. I think using a different font for the slides wouldn't be a bad idea.
    I don't usually mind shitty fonts but this was actually annoying to look at.

    Great series though!

  11. Great videos, well explained and very insperational…. looking through them all, one better than the other….

  12. Jen Simmons has really ignited my interest in CSS grid. Her work demonstrates the endless possibilities that CSS grid is now giving to web designers. Exciting times ahead. Thanks for the inspiration as it has given me the impetus to start experimenting with this new CSS module.

  13. You mention that the 3rd column is 1fr although in CSS you've given it a value of minmax(min-content, 1fr). Any reason for not giving it a value of 1fr directly? What is this line of code doing?

  14. Enjoyed the video, but I don't see how the max-content setting on the first column is applied to both the first and second columns. Why isn't it pushing the second column over to the end of Jan's last name. If it were a table layout it would have a colspan="2". What am I missing here?

  15. The demo shown in this video would be easily possible without CSS Grid, by just having two fixed or absolute positioned elements…?

  16. I know these are just examples as a proof of concept, but i'm getting i'm a little concerned that CSS Grid seems to be erring towards building print layouts for the web, when should be focussing on building web layouts for the web. I'm probably being over cautious, but it's something i've noticed quite a lot when CSS Grid gets talked about. We seem to hold up these—albeit fantastic—pieces of graphic design history as some kind of goal or end point, when really they're the product of a completely different set of constraints in a different medium entirely.

  17. No thumbs down?! What's wrong with you? Can't you create content like every other YouTuber where the trolls come to vote you down just because they don't like the color of your shirt? 😜😆

  18. Very nice. Grid is awesome as is flexbox. Love how you approached this. I think I am going to start doing the same. I'm way too eager to dive right into coding. I need to learn how to breath first lol. Thank you for sharing another awesome demo.

  19. Print designers had to become web designers to then go back to do print layouts kind of lol

Leave a Reply

Your email address will not be published. Required fields are marked *