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
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
Жыл бұрын
Thanks for clarifying it's not her looks (the way she looks I hope not).
@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
Жыл бұрын
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
I use Grid even with IE not supporting it. I just don't support IE xD
@bialcus69
5 жыл бұрын
Nobody should.
@justinharrell327
4 жыл бұрын
Yes. Stop supporting stupidity.
@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
4 жыл бұрын
You did lean IE 0x0b
@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.
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.
"Please don't use a framework - do some vanilla css yourself" - that settles it, I officially love you! :-)
@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
3 жыл бұрын
fucking hate css it's so annoying
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
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!
You are the best. Thank you. Never stop making these videos. You saved us from an huge amount of extra work.
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.
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!
I am so thrilled and grateful for these videos. Thank you.This is such a breath of fresh air for design on the web.
I like how confident, knowledgeable she's.
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!
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.
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.
A very intensive beginning! )))) I wasn't ready for this... ))))
Wow, super knowledgable. I subscribed :D Thanks for this video and am looking forward to digging into the the rest of your videos
she explains things like were both stupid. I love it!
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!
Great playlist! I really live your inspiration and drive when explaining CSS grid, as well as the history and reasons behind it
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
6 жыл бұрын
Mine too!
Always awesome and insightful, Jen!
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.
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
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
6 жыл бұрын
Thanks!
You are the BOMB!! I love that you’re encouraging artistry and flow. So insightful and inspiring! Thank you!
Very glad I stumbled upon this, Thank you!
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.
Thank you very much for sharing, this definitely helps.
Flex & grid were a wonder when I discovered them. Thanks Jen, subscribed.
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 :))
This is great, really good coverage of all things!
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.
Loved the video. Very informative and nicely told. Thank you. 🤝🤝
Totally inspiring. Love that there’s no intro. Huge thanks. :-)
Inspiring as always, thank you for spreading ideas
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.
I love your videos.. tanks a lot for taking the time and creating them.
Great stuff. Thanks Jen!
YES! love the 'replacement mentality' explanation.
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.
Thank you for all the great content on this channel, you are a great teacher!!
Ohhh why just I only discover this Channel. Thank you so much. 😍❤️❤️
That's a fantastic video, Jen! Thank you, very much :-)
I like you very much! You allow yourself to free thinking and experimenting. Thanks for sharing your brightness with us!😚
You explain really quite well.
Thanks, Simmons. You have said it all. You're well grounded in CSS
oh my god, this channel and it's videos are awesome! so many thanks!
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
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!
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 :)
How good is Jen tho 👏. Thank you for the extra effort you put into organizing the description along with linking to further content.
GREAT video ! love your way of explaining ;) keep it up
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. . .
I love your videos! Always great content.
Thanks for video. ! I adore your lessons !
Thank you for the videos you make.
#7 - Love this! Thanks for sharing!
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.
Thanks for the simple and so easy explanation :-)
Great video, thank you so much, using grid in my next project!
9 mistakes, 9 times I couldn't agree more with you! All of them are so true.
Well done !
Excellent video, you can continue with this great content, please !
Thank you 🤜🔥
Awesome and "lightweight" teaching style. Kudos
i like your idea of framework.. thank you.
Thank you. Really!
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.
thanks a lot, very interesting explain
Great video series! :)
lovely recap
Refreshing. A beginner would say 'this is what I was missing!'
Thank you.
Love it, love it!!!
I just love her. keep going that perfect job!
🤔 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 😂
Dope. Thanks !!
She's a awesome teacher.
great explanation!!!
Habsolutely in love with these videos.
you just filled me with hope.
great thanks
"We don't need every website to look like the same anymore" 🤣
@joeldcanfield_spinhead
4 жыл бұрын
The face she made. Yeehaw.
@laurenc180
4 жыл бұрын
So much shade
@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
4 жыл бұрын
Steven Dx what? I think you misunderstood.
@jonragnarsson
3 жыл бұрын
Hi, I am from the future. Nothing has changed.
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.
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
2 жыл бұрын
She is Amazingly exceptional
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?
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
6 жыл бұрын
This is a very good question…
@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
5 жыл бұрын
Sean Marsh not ideal for accessibility though. And also you’re still only serving a single image?
Awesome!!! You should have 1m subscriptions already
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.)
Holy Cheese Dip!!! I needed this video so much! THANK YOU! Subscribing and watching all your other videos ASAP! YOU DA BESTEST, JEN :0)
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 ;)
thanks you and god bless you.
Awesome!
Thanks a lot for share your knoledwege, i'm waiting your next one :)
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.
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.
Why are there down votes on this?!? Great job again Jen!!!
Watching this is therapeutic
Love it!
Looove your videos. Thank you for sharing all of this knowledge goodness. I vote you make a comprehensive Udemy class.
Why is this channel so underrated?