HomeArticlesMin & Max Content Sizing in CSS Grid — 1/3 Flexibility Min & Max Content Sizing in CSS Grid — 1/3 Flexibility By Juan Cameron January 9, 2020 Articles, Blog 35 Comments Tags:content sizing, css, CSS Grid, css grid layout, Developer Relations, developer tools, DevTools, firefox, flexbox, flexibility, Fonts, graphic design, jen simmons, layout, max-content, min-content, minmax, Mozilla, Resilient CSS, Resilient web design, Responsive design, responsive web design, Responsive website, sizing Related Posts DIY screen printing essentials | CharliMarieTV ¿Puede Windows 7 ser libre? GioCode 🤔 Flutter Interact Keynote Recap About Author admin 35 Comments Filipe Valente Gomes April 17, 2018 Print designers had to become web designers to then go back to do print layouts kind of lol Reply Cerge Ant April 17, 2018 Thank you Jen! Now I know how to force those unruly headers placing in a way I want. Reply Julie G April 17, 2018 This is so useful, thankyou! Reply Владимир Вайвада April 17, 2018 Спасибо Вам за видео! Reply Jeff Schwartz April 17, 2018 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 Chris Valiente April 18, 2018 Your level of expertise is very appreciated. Keep sharing that knowledge. Reply Vince Aggrippino April 18, 2018 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 Santiago Medina April 18, 2018 Thanks for this great explanation! I enjoy all your videos. Reply BMJT April 19, 2018 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 Jens Bröcher April 27, 2018 The demo shown in this video would be easily possible without CSS Grid, by just having two fixed or absolute positioned elements…? Reply Grayson Gordon May 15, 2018 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 Akshat Mishra May 22, 2018 Absolutely loved this explanation, the layout looks pretty cool too! Thank you 🙂 Reply Saikat Das May 23, 2018 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 Jimmy Janson May 24, 2018 How max-content is different from 1fr? Reply For Phone May 28, 2018 M'am!!!! THAT WAS AWESOMEE!! THANKS! Reply Daniel Parsons July 23, 2018 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 E M July 29, 2018 Thanks for sharing, you are an excellent teacher. Reply Rocco Marsico August 29, 2018 Great videos, well explained and very insperational…. looking through them all, one better than the other…. Reply Niele160 October 18, 2018 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 Nancy October 23, 2018 Sees poster thinks " Mhh…how would this as website work?" I love how her mind works 😊 Reply Yana Bozhenko November 29, 2018 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 Marlon Braga November 30, 2018 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 Max Weir December 29, 2018 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 NotOnLand February 4, 2019 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 guillermo g February 6, 2019 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 Jonatan Córdoba February 19, 2019 Your depth of thoughts and the atmosphere generated in your videos are like… Carl Sagan talking about CSS. Love it. Reply HSIN February 23, 2019 What's the name of book in 2:37, where she shows jan tschichold's work ? Reply Radelio Pano February 27, 2019 where is the code Reply Audra Ogilvy March 10, 2019 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 Stephanie Tihanyi March 12, 2019 I am just starting out self-learning web development and Jen you are a gem!. Watching all your vids. Reply Sungmi Kim March 14, 2019 Amazing! Easy to understand! Thank you Jen:) Reply Hamza Arshad March 31, 2019 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 A Pall May 24, 2019 what's the browser support? (no information about this on MDN unfortunately) Reply Helcio Oliveira August 1, 2019 Your videos are really nice. Passion is contagious Reply Ed Garzaro December 19, 2019 It's a joy watching techy artists. Thank you for the clear explanation. Reply Add a Comment Cancel reply Your email address will not be published. Required fields are marked *Comment:*Name:* Email Address:* Save my name, email, and website in this browser for the next time I comment.