Min & Max Content Sizing in CSS Grid — 1/3 Flexibility Posted on May 30, 2019May 30, 2019 by Hans Swaniawski by Hans Swaniawski Post navigation Self Publishing – How do I get my book into bookstores?Novelists [Full Album Stream] [Novelists Demo] 33 thoughts on “Min & Max Content Sizing in CSS Grid — 1/3 Flexibility” what's the browser support? (no information about this on MDN unfortunately) Reply 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 Reply Amazing! Easy to understand! Thank you Jen:) Reply I am just starting out self-learning web development and Jen you are a gem!. Watching all your vids. Reply 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. Reply where is the code Reply What's the name of book in 2:37, where she shows jan tschichold's work ? Reply Your depth of thoughts and the atmosphere generated in your videos are like… Carl Sagan talking about CSS. Love it. Reply 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! Reply 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 Reply 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 Reply 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! Reply 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! Reply Sees poster thinks " Mhh…how would this as website work?" I love how her mind works 😊 Reply 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! Reply Great videos, well explained and very insperational…. looking through them all, one better than the other…. Reply Thanks for sharing, you are an excellent teacher. Reply 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. Reply M'am!!!! THAT WAS AWESOMEE!! THANKS! Reply How max-content is different from 1fr? Reply 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? Reply Absolutely loved this explanation, the layout looks pretty cool too! Thank you 🙂 Reply 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? Reply The demo shown in this video would be easily possible without CSS Grid, by just having two fixed or absolute positioned elements…? Reply 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. Reply Thanks for this great explanation! I enjoy all your videos. Reply 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? 😜😆 Reply Your level of expertise is very appreciated. Keep sharing that knowledge. Reply 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. Reply Спасибо Вам за видео! Reply This is so useful, thankyou! Reply Thank you Jen! Now I know how to force those unruly headers placing in a way I want. Reply Print designers had to become web designers to then go back to do print layouts kind of lol Reply Leave a Reply Cancel reply Your email address will not be published. Required fields are marked *Comment Name * Email * Save my name, email, and website in this browser for the next time I comment.