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
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 :)