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.
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.
Her bit about frameworks really sold me. I'm officially a fan.
Where can I find a link to her videos? I’m on mobile and don’t see it anywhere.