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 every...
For further actions, you may consider blocking this person and/or reporting abuse
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. ;)
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.
I have experimented with grid, but currently my workflow is based around flex box. I am interested in how I can implement CSS grid into new projects though!