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.