9 Biggest Mistakes with CSS Grid

Ғылым және технология

It's easy to make lots of mistakes with a new technology, especially something that's as big of a change from the past as CSS Grid. Jen lists the 9 Biggest Mistakes she sees people making when using CSS Grid, with advice and tips for avoiding these pitfalls and old habits.
Mistake 1: Thinking CSS Grid is Everything
“Flexbox vs. CSS Grid - Which is Better?”: • Flexbox vs. CSS Grid -...
“Using Flexbox & Grid Together”: • Using Flexbox + CSS Gr...
“Obliterate Boxiness with CSS Shapes”: • Obliterate Boxiness wi...
Mistake 2: Using Only Percents for Sizing
“Min & Max Content Sizing in CSS Grid”: • Min & Max Content Sizi...
“FR Units in CSS Grid“: • FR Units in CSS Grid -...
“MinMax in CSS Grid”: • MinMax in CSS Grid - 3...
Mistake 3 : Assuming You Need Breakpoints
“Incredibly Easy Layouts with CSS Grid”: • Incredibly Easy Layout...
Mistake 4: Getting Confused by Numbering
“Innovative & Practical Graphic Design with CSS Grid”: • Innovative & Practical...
“Basics of CSS Grid: The Big Picture”: • Basics of CSS Grid: Th...
Mistake 5: Always Using 12-columns
Jen talks about this towards the end of “FR Units in CSS Grid“: • FR Units in CSS Grid -...
Mistake 6: Ignoring the Power of Rows
“Flexibility & The Fold”: • Flexibility & The Fold...
“Whitespace on The Web”: • Whitespace on The Web!...
Mistake 7: Reaching for a Framework
Mistake 8: Waiting for IE11 to Die
“Internet Explorer + CSS Grid?”: • Internet Explorer + CS...
7-part Series on Writing Resilient CSS that works in all browsers: • Resilient CSS: 7-part ...
Mistake 9: Hesitating, Instead of Playing
“Responsive Mondrian”: • Responsive Mondrian - ...
“CSS Grid like you are Jan Tschichold”: • CSS Grid like you are ...

Пікірлер: 261

  • @roeltz
    @roeltz6 жыл бұрын

    Jen is an unique speaker. She does not only explain very technical stuff very simply, but she also brings her own ideas and experiences from a more creative standpoint to inspire others. I think I'm in love with her.

  • @raygordonteacheschess5501

    @raygordonteacheschess5501

    Жыл бұрын

    Thanks for clarifying it's not her looks (the way she looks I hope not).

  • @edwassermann8368

    @edwassermann8368

    Жыл бұрын

    @@raygordonteacheschess5501 you had to be that guy, huh? Well, newsflash, it's you who isn't much of a looker Ray! Had to rinse my eyes after looking briefly at your vids man.

  • @rl6382

    @rl6382

    Жыл бұрын

    Yeah there’s something really attractive about her. She’s not the best for looks I mean she’s a bit older but she’s still cute and has a really nice personality

  • @devKazuto
    @devKazuto5 жыл бұрын

    I use Grid even with IE not supporting it. I just don't support IE xD

  • @bialcus69

    @bialcus69

    5 жыл бұрын

    Nobody should.

  • @justinharrell327

    @justinharrell327

    4 жыл бұрын

    Yes. Stop supporting stupidity.

  • @skater15153

    @skater15153

    4 жыл бұрын

    Actually IE 11 supports grid, it was the first browser to support it. It's just a different flavor of it and you can do a lot in it. It's a bit of extra work but it's very possible.

  • @vincentnonnenmacher9352

    @vincentnonnenmacher9352

    4 жыл бұрын

    You did lean IE 0x0b

  • @P4INKillers

    @P4INKillers

    4 жыл бұрын

    It does support it though. Thankfully we're starting to come to a point where clueless people are using Edge by default, and that is bearable at least.

  • @kingscrusher
    @kingscrusher4 жыл бұрын

    You are brilliant. I am now a follower of this channel. Thank you so much. You have great artistry, experimentation, and insights. Thanks so much.

  • @jrgenbrix5838
    @jrgenbrix58385 жыл бұрын

    "Please don't use a framework - do some vanilla css yourself" - that settles it, I officially love you! :-)

  • @fuzzypumpkin7743

    @fuzzypumpkin7743

    5 жыл бұрын

    Seriously, I feel like I spend more time fighting with a framework than the time it might save me on a few aspects!

  • @akar._.J

    @akar._.J

    3 жыл бұрын

    fucking hate css it's so annoying

  • @xmlthegreat
    @xmlthegreat5 жыл бұрын

    If Jen could do a Full Stack video series, that would be nice. Her teaching style is energetic instead of dull and flat.

  • @shaun_rambaran

    @shaun_rambaran

    5 жыл бұрын

    There are other nice ones on KZread, I find. I like the teaching style of Derek Banas, which fields warm, caring, and friendly. I find Traversy Media is very clear and thorough in his explanations too. There's also a guy named 'Bobby' who teaches about Wordpress; I really like him too, but I can't remember his channel name. Jen Simmons certainly is my absolute favourite CSS and design teacher though. Yeah, the way she describes things makes you feel the same passion for the design and technologies that she does. It's great!

  • @TorBruheim
    @TorBruheim5 жыл бұрын

    You are the best. Thank you. Never stop making these videos. You saved us from an huge amount of extra work.

  • @natashagonzales3300
    @natashagonzales33005 жыл бұрын

    I just wanted to take a moment to thank you. I originally got into graphic design, but fell in love with code so decided to pursue web design. But website designs have seemed really... stuck for awhile. A box here another box there and for someone who loved the artistic side of design, it started to get really discouraging. Everyone would go on about how this is just the way the web should work, and I had a hard time feeling excited about designing websites and imagining my place in the industry. Finding your videos, hearing someone who's done this for so long and is so prolific in the community talk about building beautiful websites, challenging us to really push ourselves, it's truly reinvigorated me. Thank you.

  • @digigoliath
    @digigoliath4 жыл бұрын

    Great video! I am no designer and a complete newbie to CSS (mere weeks old). But wow, I love it when we can get into a master designer's head where the discussion is not so much about the tech and all about innovative ideas humanly imaginable. More videos please!! The presentation is wonderful too! 9:16 is GOLD!

  • @ianmoore9753
    @ianmoore97536 жыл бұрын

    I am so thrilled and grateful for these videos. Thank you.This is such a breath of fresh air for design on the web.

  • @raymondmichael4987
    @raymondmichael49876 жыл бұрын

    I like how confident, knowledgeable she's.

  • @JamesKing-jc8uy
    @JamesKing-jc8uy4 жыл бұрын

    I love the fact that you talk to us today about bloody everything! I'm sure you're rocking' the big times in our field - art/dev/leadership. But I wouldn't have learned CSS and Flex without your sympathetic and really cool wise help. Thanks a million Jen. You also have a really soothing voice, perfect teacher, thank you!

  • @keithpurtell1213
    @keithpurtell12133 жыл бұрын

    Another perfect tut from Jen. Not a stiff lecture. It's like sitting in a comfortable room listening to a really interesting sr dev who wants you to succeed.

  • @kandysman86
    @kandysman865 жыл бұрын

    I've been learning Html , CSS and javascript my own for 2 months now, and i have no idea how I've missed your content. You are a lifesaver. This channel is what I've needed most.

  • @IgorThompsonMusic
    @IgorThompsonMusic5 жыл бұрын

    A very intensive beginning! )))) I wasn't ready for this... ))))

  • @leea4839
    @leea48396 жыл бұрын

    Wow, super knowledgable. I subscribed :D Thanks for this video and am looking forward to digging into the the rest of your videos

  • @emartin1990
    @emartin19905 жыл бұрын

    she explains things like were both stupid. I love it!

  • @TaberIV
    @TaberIV6 жыл бұрын

    I'm graduating with a computer science degree this year, and I'm a solid programmer, but always found CSS frustrating. This channel helped make all of it make so much more sense and I'm managing to make webpages that don't _just_ work, but also look nice!

  • @tangytech7641
    @tangytech76415 жыл бұрын

    Great playlist! I really live your inspiration and drive when explaining CSS grid, as well as the history and reasons behind it

  • @YannickL
    @YannickL6 жыл бұрын

    Very refreshing thanks! Specially the no new framework section :) ... you are a grow up, write your own lay out is gonna be my new motto :)

  • @lalaithan

    @lalaithan

    6 жыл бұрын

    Mine too!

  • @cammatthewhayes
    @cammatthewhayes6 жыл бұрын

    Always awesome and insightful, Jen!

  • @codecobber1107
    @codecobber11074 жыл бұрын

    Simply put . . . You are a legend. I tried CSS Grid back in 2017 but decided to leave it until the browsers caught up. Now in 2020, I'm jumping back in. Your advice in invaluable, your comments insightful. Thank you for the videos.

  • @DanielGamage
    @DanielGamage6 жыл бұрын

    using posters as a source of inspiration is such a good idea! there are so many great examples of *wild* layouts-rotated, nested, distorted-in traditional design that are super rewarding to code into a webpage, especially if it can adapt to different device sizes

  • @dimitridehouck9506
    @dimitridehouck95066 жыл бұрын

    9:19 made me laugh 😁 your video's are so amazing. You explain it so well and clear. I am binge watching them all. They are pure gold! Keep em coming.

  • @LayoutLand

    @LayoutLand

    6 жыл бұрын

    Thanks!

  • @BeckyAlter
    @BeckyAlter2 жыл бұрын

    You are the BOMB!! I love that you’re encouraging artistry and flow. So insightful and inspiring! Thank you!

  • @spookystoryz
    @spookystoryz5 жыл бұрын

    Very glad I stumbled upon this, Thank you!

  • @PCHelpNews
    @PCHelpNews5 жыл бұрын

    As a beginner and hobbyist dabbling,, Jen inspires me to learn CSS Grid. I can't stop watching your videos and only hope I will be able to design with Grid.

  • @josema-boy7610
    @josema-boy76106 жыл бұрын

    Thank you very much for sharing, this definitely helps.

  • @drmryan
    @drmryan6 жыл бұрын

    Flex & grid were a wonder when I discovered them. Thanks Jen, subscribed.

  • @nasseransari4378
    @nasseransari43784 жыл бұрын

    This is the first video I saw from you and I can safely say you're the best :D I don't wanna hear anyone else teaching me things anymore :))

  • @MaxWeir
    @MaxWeir6 жыл бұрын

    This is great, really good coverage of all things!

  • @mathws1
    @mathws16 жыл бұрын

    I completely agree with Jen, front-end frameworks are a great starting point but sometimes you just get to a point where you don't need them anymore. Writing your own style guide that is tailored to your app makes so much more sense.

  • @asishraz6173
    @asishraz61733 жыл бұрын

    Loved the video. Very informative and nicely told. Thank you. 🤝🤝

  • @bms6021
    @bms60216 жыл бұрын

    Totally inspiring. Love that there’s no intro. Huge thanks. :-)

  • @RomanFilenko
    @RomanFilenko6 жыл бұрын

    Inspiring as always, thank you for spreading ideas

  • @crooker2
    @crooker26 жыл бұрын

    One of the reasons I like using a framework like BS4 is for the Javascript components. I would still prefer to use CSS Grid for the layout, and use BS4 for the javascript. Much easier than building everything from scratch.

  • @jonathasscott4484
    @jonathasscott44846 жыл бұрын

    I love your videos.. tanks a lot for taking the time and creating them.

  • @jamestormey4904
    @jamestormey49045 жыл бұрын

    Great stuff. Thanks Jen!

  • @visulliv7601
    @visulliv76012 жыл бұрын

    YES! love the 'replacement mentality' explanation.

  • @CyrusPieris
    @CyrusPieris3 жыл бұрын

    Thank you. I hope you keep evangalising CSS Grid and layouts. As a trainee front end developer I am learning so much from these videos.

  • @MartijndeValk
    @MartijndeValk5 жыл бұрын

    Thank you for all the great content on this channel, you are a great teacher!!

  • @kenbee85
    @kenbee855 жыл бұрын

    Ohhh why just I only discover this Channel. Thank you so much. 😍❤️❤️

  • @DavidRymell
    @DavidRymell6 жыл бұрын

    That's a fantastic video, Jen! Thank you, very much :-)

  • @EMonzon
    @EMonzon6 жыл бұрын

    I like you very much! You allow yourself to free thinking and experimenting. Thanks for sharing your brightness with us!😚

  • @feelmehish8506
    @feelmehish85063 жыл бұрын

    You explain really quite well.

  • @simonkalu
    @simonkalu5 жыл бұрын

    Thanks, Simmons. You have said it all. You're well grounded in CSS

  • @ThierryReneSantosMatos
    @ThierryReneSantosMatos5 жыл бұрын

    oh my god, this channel and it's videos are awesome! so many thanks!

  • @TheElkster
    @TheElkster6 жыл бұрын

    Great video - it's reinvigorated my desire to get stuck back in to going over the basics and to play around with Grid. I will definitely watch all the other recommended videos, especially the ones that talk about how and when to use both Flex, Grid and Float - unfortunately I'm not a graphic designer and not very creative and so I need to see many examples of it in use in order to spark ideas of my own. The other one I'll be paying particular attention to is the 7 part series and how to make CSS resilient in all browsers... knowing how and when to use 'fall backs' is something that has eluded me for some time!

  • @leea4839

    @leea4839

    6 жыл бұрын

    Dont fall into the i'm not a designer or creative trap, design can be learnt, dig into design books and find what is visually appealing to you!

  • @meljones2922
    @meljones29225 жыл бұрын

    Awesome, thanks for the tips! You've inspired me to dive deeper into grid. I'm going to start with some experimental play and then try to put together my own vanilla style guide. Thank youuuuu :)

  • @jakemetz1742
    @jakemetz1742 Жыл бұрын

    How good is Jen tho 👏. Thank you for the extra effort you put into organizing the description along with linking to further content.

  • @phobyux1349
    @phobyux13495 жыл бұрын

    GREAT video ! love your way of explaining ;) keep it up

  • @runnersreign
    @runnersreign4 жыл бұрын

    Great video, especially for one who has made those mistakes before. Any chance you could provide any suggested material for growing one's understanding of number 6? I have been battling using flex solve this and maybe css grid may fit better. . .

  • @brunoB182
    @brunoB1826 жыл бұрын

    I love your videos! Always great content.

  • @user-vd4lk6mb5n
    @user-vd4lk6mb5n5 жыл бұрын

    Thanks for video. ! I adore your lessons !

  • @bobbysilver272
    @bobbysilver2726 жыл бұрын

    Thank you for the videos you make.

  • @gothamfury
    @gothamfury4 жыл бұрын

    #7 - Love this! Thanks for sharing!

  • @RedEyedJedi
    @RedEyedJedi4 жыл бұрын

    Use floats when you want the text to float around an image the way it does in print. That's what it was designed for and it does that well.

  • @faicalfaical
    @faicalfaical5 жыл бұрын

    Thanks for the simple and so easy explanation :-)

  • @pabloserafini5303
    @pabloserafini53035 жыл бұрын

    Great video, thank you so much, using grid in my next project!

  • @moy2010
    @moy20105 жыл бұрын

    9 mistakes, 9 times I couldn't agree more with you! All of them are so true.

  • @cekuhnen
    @cekuhnen11 ай бұрын

    Well done !

  • @jairdevep7214
    @jairdevep72145 жыл бұрын

    Excellent video, you can continue with this great content, please !

  • @dysphemic1
    @dysphemic13 жыл бұрын

    Thank you 🤜🔥

  • @joaogarrano4116
    @joaogarrano41165 жыл бұрын

    Awesome and "lightweight" teaching style. Kudos

  • @kadersuper
    @kadersuper3 жыл бұрын

    i like your idea of framework.. thank you.

  • @shavaladesilva2265
    @shavaladesilva22654 жыл бұрын

    Thank you. Really!

  • @pdsnpsnldlqnop3330
    @pdsnpsnldlqnop33306 жыл бұрын

    Frameworks that co-opt CSS Grid are really bad news. I did a project with Foundation and that now has absorbed CSS Grid. It obfuscates the underlying CSS Grid and hides the key functionality, making it not obvious that layout can differ from document structure. Plus there is a whole shedload of Foundation stuff to learn, this has to be unlearned when moving to CSS Grid proper. They don't even have the decency to explain that they have just co-opted CSS Grid.

  • @longtran12345678
    @longtran123456786 жыл бұрын

    thanks a lot, very interesting explain

  • @adnFx2
    @adnFx25 жыл бұрын

    Great video series! :)

  • @its_tubepaste
    @its_tubepaste3 жыл бұрын

    lovely recap

  • @taariqq
    @taariqq5 жыл бұрын

    Refreshing. A beginner would say 'this is what I was missing!'

  • @simplehumancomplexambition9884
    @simplehumancomplexambition98844 жыл бұрын

    Thank you.

  • @stevehemmer9668
    @stevehemmer96686 жыл бұрын

    Love it, love it!!!

  • @vinicius-dev
    @vinicius-dev5 жыл бұрын

    I just love her. keep going that perfect job!

  • @ahsath
    @ahsath6 жыл бұрын

    🤔 it's really weird, i was thinking in all of this long before this video came out then i realized that those are really the common mistakes that many of us make not because we want but because there is so much noise and opinions that sometimes are not the appropiate ones. I really appreciate this video it was like a true answer. By the way besides the number line mistake i ran in one while understanding spam, it start to count from where you currently are 😂

  • @ernestorh6110
    @ernestorh61104 жыл бұрын

    Dope. Thanks !!

  • @danielsarsi
    @danielsarsi6 жыл бұрын

    She's a awesome teacher.

  • @aranofskid
    @aranofskid5 жыл бұрын

    great explanation!!!

  • @sortof3337
    @sortof33375 жыл бұрын

    Habsolutely in love with these videos.

  • @leewilson4199
    @leewilson41995 жыл бұрын

    you just filled me with hope.

  • @technopack497
    @technopack4972 жыл бұрын

    great thanks

  • @aprsecond
    @aprsecond6 жыл бұрын

    "We don't need every website to look like the same anymore" 🤣

  • @joeldcanfield_spinhead

    @joeldcanfield_spinhead

    4 жыл бұрын

    The face she made. Yeehaw.

  • @laurenc180

    @laurenc180

    4 жыл бұрын

    So much shade

  • @stevendx6601

    @stevendx6601

    4 жыл бұрын

    Unless comparison shopping. Major use by the way. Reading the news, one paragraph after another. Not rocket science. Go into film making if web sites are so annoying? Lol.

  • @laurenc180

    @laurenc180

    4 жыл бұрын

    Steven Dx what? I think you misunderstood.

  • @jonragnarsson

    @jonragnarsson

    3 жыл бұрын

    Hi, I am from the future. Nothing has changed.

  • @TytusDubel
    @TytusDubel4 жыл бұрын

    wow..Madamme, you're really straight and clean: i'm a newbie [is it correct??] in the css world and generally speaking, web. I'm a graphic designer, yes, this i can say, as i'm used to be ready to print out the things, but the web, it's such a hard piece of cake..when i saw grid it was like wow, but obviously, not knowing things, makes it complicated. You made me more calm, i see that the path of css is like adding a new possibility to what was been already done: ok, we had Flex, now, a Grid, for some reason. So, as i understand, we don't throw in the bin the other, but simply, aggregate a new "technique" to our system of working. So to say, in my lab [i just make an out loud reasoning of my own process] we have vectors and rasters: they both exist, we can't say one is better than the other. They ARE. :- D Happy to understand more new things, and definitely i'll follow your thoughts, as you instantly gave me the impression of a Wise Person, not only about the tecnica topic, but, further than that, overall.. [ hope it make sense in english]. Thank You for the video, i really appreciated it! Tytus.

  • @scottonanski4173
    @scottonanski41733 жыл бұрын

    I'm always blown away by how she crystalizes everything. "There's no reason to choose between them. They're both part of CSS".

  • @GIGvalley_tech

    @GIGvalley_tech

    2 жыл бұрын

    She is Amazingly exceptional

  • @ms94ap
    @ms94ap5 жыл бұрын

    Very helpful video. I m a new developer and i just built a container mosaic css grid layout. Within each grid I use just plain css. No grid or nested grid at all. Is it a good practice or should I take advantage of the grid system?

  • @PatrickSamphire
    @PatrickSamphire6 жыл бұрын

    Hi Jen. I've been really enjoying your videos and I've found your ideas of what we can do with CSS grid incredibly inspiring. Where I'm really hitting a barrier, though, is trying to figure out how to properly incorporate responsive images with CSS grid (or Flexbox, for that matter). Obviously, in terms of performance, I would love to be able to deliver the correct size image to each browser rather than just shrinking down massive images. For example, in older layouts down with breakpoints, floats and percentages, I could set it up so that an image in a column was full-width when the column was small, half-width when it was larger, and third-width at very large, and serve the correct sized image in each case. I can't figure out how I could do that with grid, because I don't know how large a column or cell will be and so I can't use srcset and sizes to specify the correct image file to use. Am I missing something incredibly obvious here? Is there a way to serve proper responsive images in a case like this? I wonder if you might consider addressing this in a video? Thanks!

  • @LayoutLand

    @LayoutLand

    6 жыл бұрын

    This is a very good question…

  • @SeanMarsh

    @SeanMarsh

    5 жыл бұрын

    I've been using divs with CSS background images, set to cover and tweaked a little if needed. That way my images always fit well :-)

  • @karlgoldstraw

    @karlgoldstraw

    5 жыл бұрын

    Sean Marsh not ideal for accessibility though. And also you’re still only serving a single image?

  • @wagnermoreira786
    @wagnermoreira7866 жыл бұрын

    Awesome!!! You should have 1m subscriptions already

  • @shaun_rambaran
    @shaun_rambaran5 жыл бұрын

    Man, point seven reminded me of the 'good old days' of webdev. They maybe weren't all that good in terms of technologies-I'm talking about back when CSS 1.0 first appeared and we were still arguing with IE5.5-but website designs were so much more varied and creative back then! Lots of broken sites too, for sure; Lots of webpages of animated gifs and 'sparkles', certainly; But so much variety! Well, Layout Land, I'm certainly hoping that you're right and the next stage of webdev and webdesign sees creativity and variety return to the crazy field we work in. (I don't believe I'm only in my thirties but already have 'back in my day' stories.)

  • @JennRankine
    @JennRankine6 жыл бұрын

    Holy Cheese Dip!!! I needed this video so much! THANK YOU! Subscribing and watching all your other videos ASAP! YOU DA BESTEST, JEN :0)

  • @vi9126
    @vi91264 жыл бұрын

    KZread recommended me this video when I was working on making my personal layout with grid, flexbox, variables and light dark mode. No, it won't be a framework because I mostly dislike them(Bootstrap is becoming a Frankenstein at this point XD), but rather a blueprint to start projects. Anyways I loved your video and the way you explained your thoughts, subscribing ;)

  • @Harsh-fd4ml
    @Harsh-fd4ml3 жыл бұрын

    thanks you and god bless you.

  • @daltonborges
    @daltonborges2 жыл бұрын

    Awesome!

  • @agarcilazomx
    @agarcilazomx6 жыл бұрын

    Thanks a lot for share your knoledwege, i'm waiting your next one :)

  • @svivian
    @svivian6 жыл бұрын

    Excellent video, just wanted to pick up on one thing. Using 12 columns is not “a legacy from technical constraints”, there were no constraints in the past that made us use 12 columns. In fact the opposite - we used columns of whatever sizes we wanted. 12 column grids became the norm because it created consistency across a website, which is still a valid design approach with CSS Grid. Of course there will be times when we want to do something different, but I think having 6 or 12 columns as a “default” will continue to be most common.

  • @logiconabstractions6596
    @logiconabstractions65963 жыл бұрын

    About the 12 columns thing - I kinda of agree, but then at the same time, I feel that for me conceptually it is the best default. Even setting aside any math/calculations, it's easier for me to grasp my layout this. way. Having nice quarters, thirds & half is great. There is a reason why many of the older (.e.g. imperial) measuring systems have a lot of 12-based units. It's intuitive.

  • @DigitalForklift
    @DigitalForklift6 жыл бұрын

    Why are there down votes on this?!? Great job again Jen!!!

  • @edoyak09
    @edoyak094 жыл бұрын

    Watching this is therapeutic

  • @faledeia1
    @faledeia15 жыл бұрын

    Love it!

  • @pax4698
    @pax46986 жыл бұрын

    Looove your videos. Thank you for sharing all of this knowledge goodness. I vote you make a comprehensive Udemy class.

  • @lomaxxbr
    @lomaxxbr5 жыл бұрын

    Why is this channel so underrated?

Келесі