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