There seems to be a myth being put around that CSS Grid Layout is going to be really difficult to learn, so difficult that poor web developers will never use it. I call nonsense. I have seen the stuff people learn on a regular basis. The average framework has a grid system more complicated to understand than Grid, you don’t have to get far into Sass to be dealing with concepts far more difficult than those you get in Grid.
I also don’t think web designers and developers are stupid and incapable of learning things, and I’m one of the few people who has actually taught grid in a classroom situation. When I do that, the comments I get from students is how straightforward grid is. I’m a decent teacher, but I don’t think that I could make something horrifically complex seem simple.
The other thing I have seen asked is why is CSS Grid Layout so complicated looking? That’s a more reasonable question, as the people making this statement generally haven’t been working with Grid yet. If you haven’t yet started solving real problems in production, it is very easy to wonder why all this stuff even exists. It may be that even if you have started working with Grid, the type of problems you need to solve never call for some of the more complex parts of the spec. However, you not needing them is not the same as them not being necessary.
The same is true for any specification or any bit of software. As a product owner I sometimes get customers wanting to know why there are a number of options to do a certain task, why have we made this more complex than it needs to be? This attitude usually comes from a place of not understanding that a piece of off the shelf software has to solve more than the needs of one individual. If you were writing your own CMS, for the needs of the types of projects you work on, you could make a whole lot more assumptions and leave out far more stuff than we can with a CMS that 10s of 1000s of people install. So it is with a CSS specification, except we are talking millions of people, doing all kinds of things, along with any number of browsers and other user agents needing to deal with the websites those people are making with it.
So, you might not need all of it. You might not need any of it. The CSS Working Group aren’t about to burst into your office demanding that you put down your floats. However, you might be interested, or you might be running into problems that your existing methods don’t solve well. In that case, I’d suggest that you start simple and then ask some questions based on things you know you would like to build. Like this.
You want to take a bunch of items and have them lay out as a grid, in rows and columns
This is the basic do I need grid or do I need flexbox question. If you have a set of items and just want them in a grid, then all you need to do is:
See the Pen Grid by Example 1: Defining a Grid by rachelandrew (@rachelandrew) on CodePen.
But, I want a flexible grid!
OK, so now you need a new bit of the grid spec. Instead of fixed width columns you need flexible columns with a new unit created for grid – the fr unit. I made you a video.
You might also like to take a quick look at repeat notation, this means you can specify a repeating pattern of tracks rather than need to write out the same thing over and over. Here is a video for that.
In flexbox I get this nice thing where I can have as many items as will fit in the browser. Can I do that with grid?
Yes, you’ll need another new thing. A function called minmax() that lets you specify and minimum and maximum size for a track and the auto-fill and auto-fit keywords for repeat() notation.
In an example and a few short videos, we covered:
- how to define a grid with fixed track sizes
- how to make a flexible grid with the new
frunit - how to repeat tracks
- how to use the
minmax()function andauto-fillorauto-fitto get as many tracks as will fit in a container.
That’s a bunch of new stuff, but you could use just that to lay out a gallery, or a set of products or any little collection of things you want to sit in a nice, flexible grid.
I have a whole set of these videos and examples. Don’t feel as if you need to understand them all, or memorise the entire specification. I can promise you that there are entire sections of CSS that I have to go look up every single time I use them. Instead look at the things that you know are difficult with other layout methods, and ask if grid might make that easier. That’s really the best place to start.
4 Comments
It is amazing to me that there is complaining about one of the greatest (generally speaking) layout tools coming to browsers now. But, change, or even the suggestion of change causes that. Either way, I’m grateful for all the resources that you’ve created and effort you have put into being a proponent of grid layout. I’ve worked with grid only a little, but one thing that stood out to me was how concise it can be. Concise means less bytes going down the line to the user and easier changes in the future as there are less lines to work with.
I look forward to using the minmax() function. I had wondered about something like that and it sounds like it will be integral to a dynamic grid layout. Thanks for the post!
Add me to the not-complaining column. This is wonderful, thanks for the rundown.
OK; you’ve pushed me over the edge.
I now feel it might be worth considering putting some of my eggs into the grid basket:)
Put me in the “why use this” camp. I don’t see any reason to adopt at this point or any foreseeable one. (but my mind is open)