Ever since the advent of CSS Grid, I never feel the need to reach for a CSS framework like Bootstrap or Foundation. I find that Grid gives me everything I need out of the box.
But with that said, my day job still supports a large user base with very old browsers, so we're unable to use Grid (for now, though that may be changing soon! 🤞), so I haven't used Grid on a huge scale yet, only for small-to-medium size sites. Maybe there's value in a framework for larger, more nested and complex layouts?
Has anyone here used Grid for larger applications? Do you use a CSS framework that does the Grid stuff for you? Have you tried it and liked/hated it?
Or have you even used one for smaller ones? Did you find it easier than writing Grid rules by hand? Do I need to take a second look?
Top comments (36)
Hey Ken,
I saw in another comment that you want to see what’s out there. Here’s a list that I stumbled on the other day that seems to be kept up to date.
I haven’t been able to look through all of these (especially the inner workings) though and so I don’t know if there is anything grid based.
If there isn’t really a framework like what you’re looking for yet, I’m sure it will come sometime.
But part of me wonders how it would work. Since grid is for layout, would you have a set of defined layouts in a framework (almost like layout themes?) and then apply a layout to a container? I’m thinking out loud but, what would you expect to do with this framework? Similar things to bootstrap?
Perhaps another reason we don’t see a grid-specific framework yet is because of a lack of support on old browsers. I saw you linked to something where there is 90% support now. That’s good but I doubt it’s worldwide. I live in Japan and there’s a lot of old computers with old browsers still kicking around. (Edit: I see on caniuse it’s a global stat — maybe my perception is wrong...time to use more grid!)
Thanks! That's a pretty comprehensive list, plenty I haven't used before.
Yeah, I'm thinking of a grid framework like Bootstrap or Foundation. To be clear, I'm not trying to find a framework to use; my feeling is that CSS Grid sort of makes frameworks like those obsolete. But that's the opinion I wanted to challenge. I've heard some rumors of other folks using Grid-based frameworks, so I was curious.
I could definitely imagine how I might create a grid system: define a container class with a Bootstrap-style 12-column grid, some classes to help place items within it, add media query classes for resizing, handle graceful degradation to flexible or floats automatically under the hood, etc. I don't think a framework like this would take full advantage of Grid's power, but at the same time you don't always need all of Grid's power. Idk, I'm not personally looking for it, but I can see why it might be attractive to some.
I don’t have a ton of experience yet using grid but of what I do know it seems that having some pre-built css for grid may have some limitations. 12 columns is likely fine, but what about rows? If I recall correctly isn’t there some way for auto-expansion? (My knowledge is fading...it’s been a while)
Yeah, some of the coolest parts of Grid are the auto-fill behaviors and rules. But there are lots of ways to write a grid system, and you could definitely take advantage of those cool features in such a system. Maybe include rows as part of the class stuff. Maybe instead of a CSS library, implement it as a Sass or Stylus plugin with mixins and functions that take row and column numbers as parameters and generate all the boilerplate
grid-columnandgrid-rowstuff, as well as other nice defaults.One very cool thing about Grid is that it's fundamentally just way more powerful than Flexbox or (shudder) float-based grids, so a framework built on it has a lot more possibilities to work with. Like I said before, I totally agree that using a pre-built system would absolutely limit what Grid can do, at least out of the box, but again, you don't always need everything Grid offers; sometimes all you need is an easy way to quickly toss elements into a basic grid without thinking too hard about it.
But also, I think that Grid gives you that right out of the box anyway, once you spend an hour learning how it functions and playing with the basics, so I don't personally feel like I need a framework, or really want to encourage others to use it!
For evidence of how easy and elegant Grid makes it to toss together a quick page layout, have a tweet:
Thanks Ken, nice tweet example! Need to get back into grid :)
Build it. You will be famous. ;)
I'm not css expert, but as far as I know, css grid was designed as a layout system. There's a pretty good article in css tricks about css grid worth reading (Second time I link a css-tricks guide hurra for those guys!). A framework usually take care for a lot more things than css layout, like styling, theming, and a big etc. The main difference between flex and grid, is that grid was designed with a larger scale layout in mind, while flex box it's more about the components of an app (for a simple explanation).
That's why I think there's no css grid framework to the date, because you can use both. Layouts with grid are pretty simple, and you can use a framework like bulma, bootstrap or whatever you like the most on top of it.
Dan Also was spot on with older browsers support. I'm sure we will see something in the future but at this moment, nothing stops you to use your favourite framework on top of a grid layout.
Yes, it's true that a full CSS framework typically has utility classes for colors and components and such. In this case though, I was specifically talking about a framework that provides CSS Grid encapsulation, something that allows adding CSS classes to your HTML elements to handle defining and adding items to a grid rather than doing it in CSS yourself.
And yeah, I agree that Grid makes layout pretty easy out of the box, and I myself am not interested in using a framework. But I've heard more than a few people express frustration with the new syntax and the stack of new properties that need to be learned for Grid, and I've heard rumors that some exist. But I have yet to encounter any 🤔
Went for a little stroll on GitHub
Found a few:
Man, those three looked promising, but it turns out none of them are actually using
display: grid☹ All are using interesting combos ofdisplay: block,display: inline-block,display: table, and variousfloathacks to set up their gridsI did a little more digging on Github, and I found a few people experimenting with it and doing some interesting stuff, but nothing really public-beta-ready:
Nothing super robust, but some interesting experiments happening.
As I read through these though, all of them seem to be kind of superfluous, and as I read the code I keep thinking that I would just prefer to write the CSS directly, and specifying my grid with class names on my HTML tags just doesn't add that much value. Idk, it will be interesting to see what emerges in the next couple years.
I was fooled!! Didn’t have time to check before sleep—sorry!
@kenbellows it seems like all three of these are using essentially the same class structure as most float-based grids - what's the point?
I mean, how something is implemented isn't all that interesting - not when it requires the same amount of CSS overall, but just has worse cross-browser support. 🤷♂️
After using CSS Grid on large teams and large projects we still ended up with writing mixins/utility classes to define basic layouts with grid. We made utilities so layouts across the application were consistent and could be adjusted easily. For more complex layouts we would define layout with the CSS Grid syntax explicitly.
The utilities I came up with eventually evolved into blueprintcss.dev a layout library I built based on CSS grid. Because of CSS Grids behavior you can define pretty complex layouts using utility based classes in the HTML without the need of excess wrapper elements like float/flexbox based grids.
Nice, simple approach! 👍
I'm not super fond of placing multiple rows of columns into a single row-container - I like the more traditional markup structure, where each row is represented by a row-wrapper.
Rather than adding margin after every row, I prefer to add margin above consecutive rows, like so:
jsfiddle.net/ev7n36q8/2/
I still wish there was a way to implement a grid that uses relative weights - like this one, but implemented using
gridrather thanflex, since, unfortunately, theflexapproach falls apart when you add margin, padding or borders.I don't think relative weights are possible with
gridthough? 🤔Nice! I'm glad to see that v3 removed the need for the row wrapper elements. That's pretty neat!
Hell Ken,
I found your articles pretty useful. Keep up the good wok :)
Now, back to your topic, in the past few weeks, I was looking for a modern CSS framework (sorry Bootstrap ..), to be used / already integrated with modern tools (Gatsby, Nuxt) and decided to use Bulma & related frameworks for React (Bloomer) and Vue (Buefy)
In order to evaluate CSS Grid, can you point me to starters or free sample websites that use CSS Grid? My intention is to analyze all the options.
Thank You!
Sure! Grid is IMHO the best change to CSS in like a decade, so definitely try it out! Here are some of my favorite Grid resources:
Thank you!
There is a css grid framework.
github.com/jensimmons/960gridgridg...
Have fun. ;-)
Did you forget the /s at the end of this, or did you not realize she had this as an example for a talk where she speaks of why 12 column is ridiculous to continue using? Not sure if you're joking or not?
Eh, "/s", ";)", all reads the same to me
Short answer: you need to take a second, third, fourth look. Also, those older browsers are literally security risks. I am sorry you have to support them, but it would behoove your clients to read Microsoft's support/non-support of versions (because yes I know you're talking about IE. It is always IE)
Long answer: (sorry for the length; I absolutely LOVE css grid)
note: we have a lot of old habits to break. Frameworks is one of them.
A - there is already ability to remain backwards compatible: smashingmagazine.com/2017/11/css-g...
B - using a CSS-grid-based framework is, to me, literally redundant. The whole idea of CSS grid is to make the layout for your project the way it needs to be for your client. Stop using frameworks, and we will hopefully start seeing more unique layouts. 12 columns can go F themselves. The awesomeness is that you can now go to a designer and say "make what you want. Don't think in columns. Think in design." And you will be able to make it, because CSS grid doesn't gaf about how many columns.
C - CSS grid + flexbox is insanely awesome. Add to that fluid typography - smashingmagazine.com/2016/05/fluid... - and you have 3 abilities that make creating and composing with CSS amazing.
D - You will write less by hand using CSS grid out of the box, than you will using any framework. Look below. With two lines, I have a responsive grid that auto fills and expands as needed:
.some-container {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(18.75rem,1fr));
}
Look at weo3.com for proof. The work section is literally the above, with one media query to change the row gap because I'm picky.
That's it. NO MEDIA QUERIES FOR THE GRID TO WORK. No pixel units used (because pixels are rigid, kill them). No fussing with someone else's worldview on what a grid/framework/website should look like. It's mine, for my site, the way I want it. Two lines.
Using grid I can focus on what the client wants, what the designer envisions, rather than "this is what we have always done".
My first experiences doing heavy CSS work were a couple of years ago, and we needed to support back to IE9 (clients....). I've been so scarred/brainwashed by that, that I'm only now starting to use Flexbox without convulsing. I've poked around at CSS Grid and really liked it, but can't bring myself to use it in production sites just yet.
Yeah, a lot of people have similar experiences. But the advent of Evergreen browsers that auto-update has given us a whole new world, and already ~90% of users fully support Grid Level 1. It's also pretty easy to add graceful fallback CSS for browsers that don't, especially if you can let go of the notion that websites must look exactly the same in all browsers.
Remember: dowebsitesneedtolookexactlythesameineverybrowser.com
I did. It's not very performance-friendly and mostly useless for daily tasks. In fact on a large-scale projects it lag as hell and quickly turn your code into hard to read mess.
Which framework did you try, if you don't mind the question? I'm curious about what's even out there
There is no frameworks. At least none of them was as flexible as bootstrap grids. Most of "grid" frameworks actually flex-based. I was playing with grids on my own.
rsms.me/raster/
Huh, that's interesting. But man, it bugs me that they went full non-standard. Non-standard tags like
<grid>and<c>, non-standard attributes likecolumnsandspanwithout prefixing withdata-... the tags especially bother me, because (unless I misunderstand) the non-standard tag names are required. I couldn't use semantic HTML with raster.css if I wanted to, could I? Or is there a way I could use<main>or<article>or<section>with likeclass="grid"or something? Because, at least based on the code snippets on the landing page, the CSS selectors seem to be explicitly bound to the<grid>and<c>tags:It seems to be a cool start of something, but I really wish they would switch from
grid[columns=1]to.grid[data-columns=1], etc. Or at least offer that as an option, because straight up preventing me from using semantic elements eliminates like half of the value that I see in CSS Grid. It's a deal breaker for me if I lose the flat semantic structures that don't require a ton of gross non-semantic container divs just to make my CSS happy.All true, I feel u brother! But still, its a cool lightweight framework.
I tried but could not find a good grid framework which falls back gracefully for older browsers . So I use flex box for grid .
Actually just wrote one today. I think. 😅
A framework? Please share! Or did you just mean you wrote a site using grid?
A framework. Was trying to do a layout with bootstrap, but there was 60px added somewhere and I couldn't figure out where. So I just threw this together in an hour or so:
gist.github.com/aronhoyer/6d394101...
Feel free to provide feedback.