9 Biggest Mistakes with CSS Grid

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments

Going back and looking through some of her other videos. This is an excellent channel that I somehow overlooked before. Speaks and demonstrates in a manner that I get without dumbing things down. Thanks for the link.

👍︎︎ 10 👤︎︎ u/FriesWithThat 📅︎︎ Jul 17 2018 đź—«︎ replies

Her bit about frameworks really sold me. I'm officially a fan.

👍︎︎ 5 👤︎︎ u/JohnBenchCalled 📅︎︎ Jul 17 2018 đź—«︎ replies

Where can I find a link to her videos? I’m on mobile and don’t see it anywhere.

👍︎︎ 1 👤︎︎ u/rdxl9a 📅︎︎ Jul 17 2018 đź—«︎ replies
Captions
I want to talk to you today about the nine biggest mistakes that I see people making when they are trying to use CSS Grid. Mistake number one. Thinking that Grid replaces Flexbox or replaces Floats. I get it. We're sort of in this mentality of I want to use this tool but is it better than that tool. If I want to use this one, that means I'm going to get rid of the other one. I'm going to use Broccoli instead of Grunt. Or I'm going to use JavaScript instead of, these are terrible examples. But usually we're deciding, like, I'm going to use Wordpress and I'm not going to use Blogger. I'm going to use Drupal and I'm not going to use whatever. Grid and Flexbox are both parts of CSS itself. There's no reason to choose between them. They're both really awesome. They do slightly different things. And you want to know what both of them do and you use want to use both of them. We're also going to continue to use Floats. There are a lot of situations where a nice little float is the perfect solution. Especially if you want to use CSS shapes. Or have some content flow around other content. That's what a float is for. There's no reason not to use floats. I have a video that shows which one is better, Grid or Flexbox. Not better, but like, how, what's the difference between the two of them and how do you use them together. Really, the basis of it all is to nest one thing inside of another inside of another. So you'll have Grid and then you'll have a Flexbox inside of it and then you might have another Grid inside of that. Or you have a flow content with a little Grid and maybe inside of there you've got some multi-column. We've got lots of options. We're going to be using all of them. Mistake number two. People are still thinking that you need to size everything in percents. We definitely want our layouts to adapt to whatever size screen that our users are using. Like a responsive website and in the world of responsive layouts, you size everything by putting a percent with, on each and everything in your layout and that way when there's less space, everything gets smaller and when there's more space, everything gets bigger. But in this world, a world I'm calling Intrinsic Web Design, it's not about having everything be percents and squishing and getting bigger in this, at the same time, in the same kind of way. We have lots of different options. We have lots of different ways in which to size things. We have lots of different ways in which to make certain things be fixed and other things be flexible. We have stages of flexibility. I have actually a three part series that you can watch on that. But I think the mistake that I'm seeing is people just assuming everything has to be in percents. Their gaps have to be in percents. Their columns have to be in percents. And I just want to challenge you to realise that it doesn't have to be percent. There might be times when it's a good idea to use it especially if you're trying to match some sort of fallback layout. You're trying to slip Grid into a Legacy layout that is already in percents. You may not have a chance to redo everything. So percents might make sense. But I think five years from now when we've sort of switched to the whole new world, we're not going to actually be setting our columns in percents very much at all. There are many better ways to do it than percents. Mistake number three. People assume that you need breakpoints for everything. Again, it totally makes sense. We have this idea that we've been using for eight years. That you set everything in percents. And then you change the number of columns at a certain breakpoint. If you want four columns, great. Then at a breakpoint, you make it two columns. And then at another breakpoint, you make it one column. And then at another breakpoint, you make it eight columns or twelve columns. But that's not actually the model that we need to use anymore. And there are many ways to use min-max syntax and a repeat auto-fit, a repeat auto-fill syntax. And save yourself the effort of writing all of those media queries. I have also videos on those things. Getting to the details of how to do that. Saving yourself a lot of effort. You don't need to use breakpoints all the time. You should learn how to create layouts that react to the size of the content and move things around as needed. Without necessarily using a breakpoint. Mistake number four. We have habits from the past where we have numbers in our world and we think of those numbers as being the numbers of the columns. Where you've got column one, column two, column three, column four. But in the world of Grid, the numbers in the Grid system don't refer to columns, they refer to the lines. So you've got a line number one, line number two, line number three, line number four, line number five. And so a four column layout actually has five numbers, five lines. And that can be a little tricky. That can throw you off. There's a way in which you're going to want to purge from your mind the old ideas from some of the old frameworks that we've been using for layout for, gosh, 10 or 12, 14 years now where the column, the numbers of the columns. It's not that now. The numbers are the lines. And once you sort of remember that that change has happened, then it can actually make it much easier for you as you're writing numbers in your Grid code to say I want this to go from line one to line five and you know that that's spanning four columns. Mistake number five to me is continuing to assume that everything should be 12 columns. Or sometimes I see people say, well, we've got a one column Grid for mobile, a four column Grid for tablets or an eight column Grid for tablets and 12 column Grid for desktops. And that's our Grid. And it doesn't have to be that way. There are good reasons it has been that way historically. It made it much easier to do the math. The math was super hard to do when we had to divide everything using percents and floats and manually doing it all ourselves. But now that we're using the computer to do all this complicated math for us, we can actually very quickly make eleven columns or thirteen columns or seven columns or six columns and we can constantly be changing it around and breaking it up. The columns also don't all have to be the same width as each other. They don't have to be the same size as each other. So there are a lot more possibilities creatively and I feel like that's a mistake we're still making in the industry. Somehow assuming that 12 is better. Or assuming that 12 is correct. When really that the legacy from a very specific set of technical constraints that we maybe still want to do but we also don't have to. Mistake number six. Forgetting about rows. CSS Grid lets us define columns which is the kind of thing that we've been doing for a long time but it also lets us define rows. And if you don't define rows, all your rows are going to be auto-height which means typically they're just going to be the height of the content that is in, is in, that is within them and that can be great. Sometimes, maybe, even most of the time, you simply want the row to be the height of the content that's in that row. A few photos with headlines, then the row will be the height of the photo plus the headline and if it grows, maybe the photo's a different size or shape, maybe the headline is longer or shorter, then the automatically sized height of the row will grow or shrink to nicely fit the content that is in that row. But that's not the only thing that we can do, we actually can use other sorts of measurements and define the rows explicitly and make the rows bigger if there's extra space, perhaps, in the viewport or smaller. We can, we don't want to make the rows smaller than the content that holds them. We don't want to, typically, we don't want to have overflow, we want to always have the row be at least the size of the content, but maybe there's, there are many times when we, when it makes sense to go ahead and, like, use up extra available space and create some nice beautiful white space. Define rows that are empty perhaps. And create better graphic design. Especially better graphic design as it reacts to the bottom edge, the fold and lets us make things size vertically in space that is more complex and more beautiful than we could ever do before without CSS Grid. So don't forget about rows and don't forget to start to think about how you might want to explore sizing in a vertical direction in order to create more beautiful graphic design. Mistake number seven. I see 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. Or I see people who make frameworks. Who are wanting to be helpful and wanting to get projects out in the world, open source projects that everybody gets excited about and they're building those frameworks using CSS Grid. I get it, that it makes sense that we think we need a framework because for the last, especially the last five years, it feels like every time we ever go to code a layout, the first thing we do is choose a framework, so it feels like, it's impossible to do it on our own, we have to have a framework, so if you're not going to use this famous framework that's based on Flexbox or this famous framework that's based on Floats, oh, let's use Grid, let's get a new framework based on CSS Grid, ugh, no, please, no no no! We don't need every website to look the same anymore. It's actually very easy to write your own vanilla CSS and create a custom framework, a custom style guide, a custom style system, how, whatever you want to call it, but your own code that's specific for your content, specific for your brand, specific for your users, specific for your interface, specific for your user experience design so that you've got the best layouts for what you're doing and it's not necessarily layouts that have been created for other people. You don't need a framework. Your developers, you, yourself can write this code. You just need to spend a little bit of time learning Grid and mastering Grid and getting to know what Grid wants to do. Please lets not create new frameworks. Please, if you're a person who created a framework in, in the past, I, I beg you not to make a new framework. We don't need a new version of our favourite frameworks. Not with Grid. We need to just let go of pre-fabricating layouts and perhaps we have starter kits to help us build style guides and such, there are reasons to share code and share libraries of code. But I think having completely pre-fabricating layouts kind of, in a multiple choice system, it's just not something that we need anymore and we can have much better design if we let that go. Mistake number eight. Assuming that you cannot use CSS Grid until Internet Explorer dies. Internet Explorer is not going to die anytime soon. Internet Explorer 11 is being used in enterprise situations. Especially intranets or places where the computers are locked down and people need access to proprietary software for that particular company. It's going to be around for a long time. So if you're waiting for internet Explorer to die before you learn CSS Grid, you're going to be waiting five or ten years. There are plenty of ways to write progressively enhanced CSS that works in browser at the same time including browsers that are not IE but who also don't have Grid. You want to support those users too. I have a bunch of videos about how to do that. I've got one video specifically about IE and how to use CSS Grid in IE. And then I have a seven-part series on how to write CSS that works in every browser including very old browsers that don't have the new thing you want to use. So please, if you're holding back, if you're saying I'm not going to learn CSS Grid because IE still exists and it's too early to use CSS Grid, honestly, I feel like you're putting your own career at a little bit of risk. You're, you're sort of saying that you're not going to learn this thing that everybody around you is starting to learn. So don't make that mistake. Maybe you can't quite use it yet at work, I understand, you got to be very practical in the projects that you're working on right now but it is time to really start thinking about it. Grid is now supported in well over 80 percent of the browsers that are in use. In some countries, it's 85 percent. In some markets or some websites, some audiences, you could easily have 90 or 95 percent of your users with CSS Grid. I know Grid has not been out very long. But the way that it came out. The way that it was finished before it was released. The way that four major browsers all shipped it within the same month and six browsers shipped it within the same year. It's unprecedented, Grid is out there. It's probably much more popular than you realise and you don't want to fall behind. Mistake number nine. Being so practical that we don't really give ourselves permission to play or to experiment. I found one of the best ways to learn Grid and to really start to get to know what it does is to not work on something for work that needs to be shipped next week. But to find some kind of inspiration out in the world. An old poster. Or a graphic design book from art school. Or something that you just happen to see. Sometimes a painting on the wall in a hotel is all the inspiration that you might need and take those ideas and just play. Just see whether or not its possible to do those ideas in Grid and dare to experiment and to explore new territory and see what it is that Grid can do. I feel like that is really going to be what gets our industry, our designers, our ideas, it's going to get the web itself into a whole new world where things just really look different than they do now. So we really have to give ourself permission to play around and to see how, what this thing is and what it is that it could be. So those are my current nine biggest mistakes with CSS Grid. I hope that helps you. Check out the other videos that I've pointed to. And I'd love to see what you come up with and the experiments that you make. Put them in the comments. Tweet at me on Twitter. I'll check them out. I frequently retweet examples that other people have made. I think it's the best way for us to play around and see what it is that this new juicy medium can do for us.
Info
Channel: Layout Land
Views: 146,117
Rating: undefined out of 5
Keywords: Jen Simmons, Mozilla, Firefox, CSS, Intrinsic Web Design, Responsive Web Design, CSS Grid, Layout, graphic design, Flexbox, typography, web design, grid layout, minmax, flexibility, grid container, grid line numbers, 12 columns, flexbox vs grid, grid vs flexbox, ie must die, grid rows
Id: 0Gr1XSyxZy0
Channel Id: undefined
Length: 14min 21sec (861 seconds)
Published: Mon Jul 16 2018
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.