A Simple Use of CSS Grid
A quick guide to using CSS grid for a 2 column layout, includes flexbox fallback for unsupported browsers.
Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.
A quick guide to using CSS grid for a 2 column layout, includes flexbox fallback for unsupported browsers.
My point, again: it’s not required that you reach for a grid framework to build a grid. You can do it! This is also not to say that flexbox is trivially easy and you’ll never have any problems. There are plenty of edge cases and weird browser support things that you may run into if you start using more niche flexbox features. The stuff we looked at here is pretty vanilla though and I’d be surprised if you had problems.
Some good flexbox grid advice from Chris Coyier. Chris has a knack of breaking things down and keeping things simple, stupid.
Build seemless – featherweight – responsive scaffold apps for mobile, 4K, and beyond. StringBean is a pure CSS solution.
Another CSS framework, this one has a 24 point grid system, rather than the more common 12 point. Scores bonus points for having a class named “MEGA-UHD”. Other than that, looks like standard fare.
A simple, responsive, and tiny CSS grid for humans who don’t like memorising all those cryptic codes like col-*-6 or something.
I like simple and it’s an interesting approach, but I’m thinking it might be lacking some breakpoints.
CSS GRID LAYOUT is nearly finalized. Which means it’s time for designers and front-end developers to set the flags enabling their browsers to support the new specification, put CSS Flexbox through its paces by using it to create layouts, and see if anything breaks.
A rallying call from Zeldman to start using/adopting flexbox. Features a curated list of CSS Grid Layout and CSS Flexbox links.
Talking of grids, I was actually looking for a minimal grid the other day when I came across Toast. I didn’t end-up using it, I couldn’t handle all the dashes, but I thought it was worth bookmarking.
In case you’re wondering, I opted to use Bootstrap-Grid-Only — the classes are familiar and it does the job.
Another CSS grid framework, this one uses flexbox and is tiny at just 512 bytes (Gzipped). Some guy is not happy about its existence, but I think it’s good to have options. I also like the live demo, which is pretty nifty.
You don’t need monolithic CSS frameworks for simple grid systems. ~150 bytes of CSS can save your life.
Ah-men.