HomeArticlesFR Units in CSS Grid — 2/3 Flexibility FR Units in CSS Grid — 2/3 Flexibility By Juan Cameron January 11, 2020 Articles, Blog 38 Comments Tags:content sizing, css, CSS Grid, css grid layout, Developer Relations, developer tools, DevTools, Feature Queries, firefox, flexbox, flexibility, Fonts, fr units, graphic design, grid container, jen simmons, layout, minmax, minmax content sizing, Mozilla, Resilient CSS, Resilient web design, Responsive design, responsive web design, Responsive website, web design, web development Related Posts Kabir Singh – Official Trailer | Shahid Kapoor, Kiara Advani | Sandeep Reddy Vanga | 21st June 2019 Mixing Rap Vocals With Waves Plugins HTML and CSS – CS50 Beyond 2019 About Author admin 38 Comments Gonzalo Dániel April 19, 2018 Great video. Thank you. Reply Patryk April 19, 2018 wow , working in CSS for atleast 9 years and I've never heard of `fr`? what is the support for this? it's awesome 🙂 And second: what if the 1fr is like 400.3229px ? will it blur the edges? Reply SimonLYW April 19, 2018 I love this channel so much. Thank you for the consistently good content! Reply Владимир Вайвада April 19, 2018 Спасибо, мне нравится Ваша манера изложения. Reply Jeff Schwartz April 19, 2018 Grid is awesome. frs make designing our layout designs as we them possible. No more industrial looking layouts (i.e. Bootstrap). Yes! Your vids are fantastic. Your enthusiasm is awesome. Reply Adel Batal April 19, 2018 I appreciate your videos a lot, thank you for the great content! Reply Santiago Medina April 19, 2018 ¡Muchas gracias por sus enseñanzas! CSS GRID es universo entero de posibilidades. Es frustrante tener que terminar utilizando frameworks de maquetación y no necesariamente por falta de conocimiento respecto a CSS, sino por la pesadilla que representa tener que medir todo. Gracias a usted y a la Sra. Rachel Andrew. ¡Saludos desde Venezuela! Reply Jay Scott ANDERSON April 19, 2018 1:57 LLOL Reply Gazump April 19, 2018 I love your video's they are amazing I have watched hours of them, my only compliant is that the audio isn't great. It's a bit fuzzy fuzzy <3 Reply nightfall April 19, 2018 such a cool-ass set of videos on grid. very much appreciated. Reply Beldibad Bad April 22, 2018 What a fantastic channel you have. Thank you Layout Land! Reply Benny Ogidan April 26, 2018 I have never Lol during one of your videos, the number of the devil ha ha. Great job Reply PaipaiLsk8 April 26, 2018 Thanks for subtitles ! Reply plezx29 May 1, 2018 The fr is a lot cleaner than doing all the complicated maths. Sometimes the 33.3333333 whatever, never worked Reply Jasper May 5, 2018 PERFECT. Reply AOli Music July 4, 2018 Thanks so much! Reply Marco F. Ramos July 23, 2018 Thank you so much! This video has made FR Units very clear to me. I meet you and had the honor to hear you speak at CODE newbie 2018. "We had a chat walking out of the Microsoft building on day two." This and many videos of yours are simply amazing. Thanks a million. Reply Виталий July 31, 2018 cool Reply Timothy Arterbury August 1, 2018 Yassss this is so helpful Reply pebre79 August 7, 2018 Ive been doing a lot of backend code, but your channel has got me inspired to get better at css Reply Hashim Warren September 3, 2018 "the number of the devil!" Reply Redbird September 27, 2018 The gridsetapp website isn't working. 🙁 Reply R C October 23, 2018 Everyone is talking about fr units with columns and that part i grasp! its taking a fraction of the remainder of the viewport width. But what is it parcelling up if used with the rows? I can't find an answer or understand that myself. If you know please tell! Reply frerosami7 December 27, 2018 Is CSS grid supported in all browsers? Reply busyrand December 31, 2018 Finally getting around to actually using Grid and Flexbox. I got so happy when I saw Jen had a video on the subject. She is a Master Teacher of Front End Layout/Development. Reply BassByTheBay February 7, 2019 Quality content presented clearly. Thank you! Reply Lee But February 13, 2019 Thank you for the great information. Very enjoyable.One thing puzzles me; we don't need to calculate fr units for columns, so how do I know my 300 x 185-pixel image will fit in it (without explicitly setting a pixel width) if I don't know how big the cell is? Reply Stephanie Tihanyi February 27, 2019 Just found this channel, what a gem. Funny and informative. Thank you very much, Jen. Reply 龟孙子,祖宗来了还不跪下。 March 31, 2019 Thanks a lot. subscribed.👍 Reply mutantXfrog April 7, 2019 Seems that the gridsetapp site is offline… 😉🤔 Reply Pocari Suit May 7, 2019 I appreciate all the framework hate, or, uh, dissuasion. I remember like 6 or 7 years ago I took one look at bootstrap and the websites it makes and said “f*** that forever.” I’ve only ever used vanilla css and I’m glad it’s progressing and making frameworks not “necessary” anymore. Reply Hero Squad Live Music June 19, 2019 Thank you so much Jen, you are the absolute best. Here I was stewing in self-loathing for the last hour for hitting the wall reworking a failed grid implementation, when I stumble again upon your videos. It was so helpful to see a fresh take and it immediately inspired workable solutions to my issue. Have a great day! Reply Marcus Zeal June 21, 2019 This is the most relatable video I've seen… ever? Probably ever. I wish your content was available 10 years ago on my first website when I used absolute positioned sidebars with crazy thick paddings. lol Reply Lauren C August 28, 2019 Thank you for this – you are amazing a great presenter. Reply animeEveryDay September 2, 2019 Keep uploading more contents on this channel. Good explanation Reply Ralph Schumacher October 8, 2019 1 fr for you, …1 fr for you … 1 fr for you … css grid teaches us to life in a better, emancipated world without rounding errors for the benefit of economic overpowered people. Reply Praveen b October 22, 2019 E = em c^2 Reply Michael P January 5, 2020 Thank you for making this! 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.