Gridlex – Just a Flexbox Grid System | Hacker News Reader

Gridlex – Just a Flexbox Grid System

gridlex.devlint.fr

89 pointsdevlint20 comments

I highly recommend Lost Grid: https://github.com/corysimmons/lost

It does flexbox grids, in addition to more traditional grid systems. I haven't run into a situation it's not well-suited to, which I definitely have when using Bootstrap and other grid systems.

I've been using lost for a few months now. Even if you don't use it it's worth taking a look. (built with PostCSS)

This is a really, really nice reinvention of tables.

I mean this in the nicest possible way. It recalls the simplicity of writing a table-based layout without all the horrible hacks people had to do when they started using tables full of gifs as a way to create a prettier page.

How is this more "table-like" than any other grid system?

Ummmm this looks amazing. I've been looking for a quick way to make flexboxy CSS layouts, including the traditional grids that I've been using and loving, but also grids without gutters, multiple ways to align, better nesting, and reversal. You've got it all. THANK YOU for making this. Can't wait to dive in and learn it!

Do I have to use LESS to use Gridlex? Or can I just link a CSS file on my web page and start using it? (Edit: I found the .min.css file in the dist folder.)

Thank you for your comment! And as you've mentioned it, there is a css (and min.css) file in the dist folder. Maybe later (with forks?) there will be a port to Sass or another preprocessor...

Perhaps consider attaching the contents of your dist folder to your github releases.

Hear hear. This would be a major help for those of us who cannot (for various reasons) have a full build environment on our machines.

And it's just easier when we're lazy :-)

The dist folder is already accessible :) In the master on github or via the download button on http://gridlex.devlint.fr

Does flexbox affect rendering speed of browsers as well or is it mostly about removing the limitations of css grid systems?

People have had success with a table layout using css display property as well: http://mdo.github.io/table-grid/

It has better support as compared to flexgrid.

Does anybody know why it isn't the more common as compared to other solutions?

Because using tables or table properties when you're not dealing with actual data tables is bad practice. This was phased out a while ago.

As a not super experienced dev, can someone explain the advantages over Bootstrap? (I'm mainly a designer so I'm a sucker for beautifully maintained documentation...)

very few lines compared to bootstrap, also its is just a grid system unlike Bootstrap which does so much more than just a grid

Does this support IE10 using the old 2012 prefixes?

EDIT: Nevermind was been lazy, it looks like it does from viewing the dist css file.

So... you have a grid that lets you set width. So does bootstrap. Flexbox is also not supported in every browser. Height setting (based on max height) would be interesting.

Of course it depends on the industry you're making the site for, Flexbox actually has pretty decent support - http://caniuse.com/#feat=flexbox

If you can ditch (or gracefully degrade) IE 9, then you should be fine with Flexbox.

What do you mean by "every browser"? Current versions of all browsers have full support. The second most recent version of Safari supports it with prefixes. IE 10 is the most recent version that browser which doesn't support it.

Source: http://caniuse.com/#feat=flexbox

IE 10 supports flexbox with the 2012 syntax. There is some wonky behavior, but prefixes will work

Float-based grids like Bootstrap have a lot of problems. If you can restrict yourself to IE10+, which is pretty reasonable for a lot of sites these days, you can use flexbox and save yourself a lot of suffering.

Looks like the next version of Bootstrap will have an opt-in flexbox grid too.

Reply on news.ycombinator.com