9 Biggest Mistakes with CSS Grid

[@roeltz]

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

[@kingscrusher]

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.

[@digigoliath]

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!

[@natashagonzales3300]

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.

[@devKazuto]

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

[@bialcus69]

Nobody should.

[@justinharrell327]

Yes. Stop supporting stupidity.

[@skater15153]

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]

You did lean IE 0x0b

[@P4INKiller]

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.

[@jrgenbrix5838]

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

[@fuzzypumpkin7743]

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

[@Akar00_00]

fucking hate css it's so annoying

[@IgorThompsonMusic]

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

[@JamesKing-jc8uy]

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!

[@emartin1990]

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

[@xmlthegreat]

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]

There are other nice ones on KZbin, 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]

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

[@codecobber1107]

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.

[@TaberIV]

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!

[@ianmoore9753]

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

[@keithpurtell1213]

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.

[@raymondmichael4987]

I like how confident, knowledgeable she's.

[@kandysman86]

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.

[@mathws1]

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.

[@aprsecond]

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

[@joeldcanfield_spinhead]

The face she made. Yeehaw.

[@laurenc180]

So much shade

[@stevendx6601]

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]

Steven Dx what? I think you misunderstood.

[@jonragnarsson]

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

[@PCHelpNews]

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.

[@BeckyAlter]

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

[@YannickL]

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]

Mine too!

[@crooker2]

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.

[@DanielGamage]

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

[@RedEyedJedi]

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.

[@dimitridehouck9506]

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]

Thanks!

[@visulliv7601]

YES! love the 'replacement mentality' explanation.

[@leea4839]

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

[@TytusDubel]

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]

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]

She is Amazingly exceptional

[@feelmehish8506]

You explain really quite well.

[@DigitalForklift]

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

[@asishraz6173]

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

[@drmryan]

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

[@jakemetz1742]

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

[@UrraSergio]

"Thinking CSS Grid is Everything." - Really? Well, there are also those who only buy cross slot screwdrivers. "Always Using 12 Columns." - When I realized that there were people using 12 column grids I was amazed. Grids offer us the keys of freedom and we close the door from inside. Curious human behavior. "Reaching for a Framework." - Well, it's hard to tear down paradigms, even the worst ones. Huge point. "Waiting for IE11 to Die." - It's so easy to make a functional grid for IE 11 that it's hard to believe that people are not doing it. It's like buying only furniture build with cross slot screws only because that's the only screwdriver you have. "Hesitating Instead of Playing." Hesitating instead of enjoying the excitement of playing. Another huge point. And another curious human behavior. My first visit to this channel. Pretty good experience. Thanks. .

[@DrinkCola]

can I use table instead of css grid?

[@logiconabstractions6596]

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.

[@svivian]

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.

[@CyrusPieris]

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.

[@tangytech7641]

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

[@PatrickSamphire]

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]

This is a very good question…

[@SeanMarsh]

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]

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

[@danielsarsi]

She's a awesome teacher.

[@nasseransari4378]

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 :))

[@meilyn22]

Where did you go? Please come back and do more videos 😭.

[@moy2010]

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

[@TheElkster]

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]

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!

[@fofivsl8139]

As a new frontend-dev who is struggling to find her way in this chaotic world of web development, I only have two words to say to you. With all my heart, THANK YOU!

[@pdsnpsnldlqnop3330]

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.

[@cekuhnen]

Well done !

[@simonkalu]

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

[@jonathasscott4484]

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

[@rogernevez5187]

Grid is ready for production?

[@runnersreign]

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. . .

[@cammatthewhayes]

Always awesome and insightful, Jen!

[@jamestormey4904]

Great stuff. Thanks Jen!

[@ThierryReneSantosMatos]

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

[@cindykee3719]

Is it still OK to use a CSS library to create "components", like a toast notification or alerts/messages, or tabs? Or should we be doing those on our own, too?

[@mjamesderocher]

Whenever you add a framework or library, it's important to understand exactly what it is that you are adding. So many frameworks have a lot of components that most websites don't need. If you pull in the whole framework, you could potentially add a lot of unnecessary page weight. Some frameworks let you customize the download to only use what you need. Or you could look at what they did, and implement it yourself. Frameworks can be helpful if they are performance and accessibility focused, but always be careful before you add anything to your project.

[@josema-boy7610]

Thank you very much for sharing, this definitely helps.

[@StreetWorkout-n6i]

Thanks for video. ! I adore your lessons !

[@kadersuper]

i like your idea of framework.. thank you.

[@MartijndeValk]

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

[@vi9126]

KZbin 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 ;)

[@radiozrevenge]

lovely recap

[@gothamfury]

#7 - Love this! Thanks for sharing!

[@edoyak09]

Watching this is therapeutic

[@RomanFilenko]

Inspiring as always, thank you for spreading ideas

[@spookystoryz]

Very glad I stumbled upon this, Thank you!

[@taariqq]

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

[@EMonzon]

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

[@MaxWeir]

This is great, really good coverage of all things!

[@dysphemic1]

Thank you 🤜🔥

[@ecofriend93]

Re: 7. What do you think of Tailwind CSS?

[@ms94ap]

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?

[@meljones2922]

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 :)

[@shaun_rambaran]

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.)

[@anselminos5238]

hmm... i currently have a problem that the text in grid goes under another grid.

[@phobyux1349]

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

[@brunoB182]

I love your videos! Always great content.

[@joaogarrano4116]

Awesome and "lightweight" teaching style. Kudos

[@bobbysilver272]

Thank you for the videos you make.

[@pablom2274]

hope you feel better ?? how has it been?

[@lomaxxbr]

Why is this channel so underrated?

[@MoraraFrank]

Passionate Teacher.

[@rohan2223]

Hello Ma'am, I have recently started building my own website. I would like to know, is it mandatory to use bootstrap to create a website. I am having difficulties customizing buttons and I don't intend to work with bootstrap. Is it possible to customize buttons in CSS?

[@khanriza]

Of course it is

[@Harsh-fd4ml]

thanks you and god bless you.

[@asishraz6173]

"People searching high and low for a new framework to replace their old framework, where the new framework just happens to be built in CSS Grid." 😂😂🔥🔥🔥 savage.

[@bms6021]

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

[@skater15153]

I'm going to send this to all my colleagues who keep making these mistakes haha perfectly sums up what I keep seeing.

[@aranofskid]

great explanation!!!

[@alexchiu]

What techniques should be using instead of percents ?

[@LayoutLand]

We can use FR units, minmax() statements, fixed sizes (in ems, rems, pixels, etc), auto - and best of all, mix them together in new and interesting ways. I explain what these are and what they do in a 3-part series: • 1) kzbin.info/www/bejne/oouVe4uVa7h6hKs • 2) kzbin.info/www/bejne/kIHXoa2rh8adsK8 • 3) kzbin.info/www/bejne/o4e0moGmpr2irJo Plus I show how things can be combined in kzbin.info/www/bejne/e3aye42vlKyam5Y

[@ytuser659]

what are the alternatives to %?

[@Webpetal]

She not opposing %, but suggesting not to bound with it for responsive layouts. Sometime we do need fixed width for some content.

[@ytuser659]

Vikas Gupta that’s right. I just wanted to know the alternatives.

[@ahsath]

🤔 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 😂

[@sabbasachisaha]

Mam , how to center text in cells in a grid cell?

[@Laxbro230]

sabbasachi saha text-align: center

[@sabbasachisaha]

@@Laxbro230 thanks for your reply. Will it Align horizontally and vertically in all grid child, as well as in a single child.

[@faicalfaical]

Thanks for the simple and so easy explanation :-)

[@xmlthegreat]

Dammit, I made the #1 mistake. I'm trying to use Grid and Flexbox for the FreeCodeCamp Responsive web design challenges, and my current project has a bunch of nested grids. It's a mess and it's making me cry.

[@ojsojs6004]

So you think you should also use floats?

[@serafinipablo]

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

[@DavidRymell]

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

[@claushellsing]

I wish I could take all your knowledge and experience and put it in my head