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!)
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
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)
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
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-column and grid-row stuff, 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:
Ken Bellows
@ken_bellows
@wesgrimes Absolutely! And if you want to take the Grid a step further, this is a perfect use case for named template areas. I'd probably also remove the .container and just used <body> directly, but that's mostly personal taste and has pros and cons Here's my take: codesandbox.io/s/xln1kkpy4z
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.
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
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 🤔
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
Man, those three looked promising, but it turns out none of them are actually using display: grid ☹ All are using interesting combos of display: block, display: inline-block, display: table, and various float hacks to set up their grids
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
I 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.
@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. 🤷♂️
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.
Build it. You will be famous. ;)
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 :)
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. 🤷♂️