Your Favorite CSS Grid System is Garbage

There. I said it.

Like most designers, I started tinkering with grid systems such as the mysteriously popular 960.gs back in 2011, and early on, I felt like there was something deeply wrong with the whole concept. For starters, semantics. With all these systems asking us to place all these bazillion class names all over our HTML, surely we’ve all stopped and scratched our heads any wondered why we ever crawled out of the primordial ooze of table-based layouts, only to let CSS devolve back into the very thing we hated (merge of layout and content). Let’s not kid ourselves, this code is not clean, and it’s not semantic. Try to work it into a responsive layout, and you’ll really see what I mean.

Which brings me to the other problems: most of these grid systems lack responsiveness, or heck, some even lack basic fluid capabilities. Sure you can shoehorn it in, maybe, but then your class names will suddenly make even less sense than before. If these CSS grids are the future of web design, maybe I’ll just go back to tables, heh. All they seem to do is make your code less sensical, your layout less flexible, and for what, exactly? To bring us back to the glory days of rowspan and colspan? Ladies and gentleman, Photoshop is your friend. Set up your columns in your mockups, slice from there, and you’ll have nothing to fear. Stop treating design like it’s programming.

Okay, so I’m oversimplifying things, haha. To be fair, CSS grids are a good solution for certain projects. Form-heavy sites. Heavily CMS-generated sites. Sites that won’t need much mobile treatment (or have a separate solution like jQuery Mobile). And also, I haven’t mentioned this yet, but there is a light shining in the distance… from the darkness, a new era of CSS frameworks has emerged, and I rather like it. Of course, I’m talking about Semantic.gs.

If you haven’t heard of this yet… take a look. Semantic. Responsive. Fluid. I was blown away. The secret is they’re using LESS, etc. to do the heavy lifting, and the end result is surprisingly tolerable. I… wow… I *like* this solution. The CSS preprocessor requirement, of course, has advantages and disadvantages on its own, but if your next project is suitable of using LESS / SCSS / SASS / Compass / Stylus / CSSPreprocessorFlavorOfTheWeek or is already using it, give Semantic.gs a try (if it supports your preprocessor). She’s pretty and smart… not like all the other girls.

I’ve also noticed Twitter Bootstrap is attempting something similar, but it’s, well, just like everything in Bootstrap, the implementation is too vanilla and inflexible. That’s right; I went there.

Leave a Reply

Your email address will not be published. Required fields are marked *