5 ms·

Gridlex – Just a Flexbox Grid System

89 points by devlint 11y ago

lsiebert 11y ago
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.
- madeofpalk 11y ago
  Of course it depends on the industry you're making the site for, Flexbox actually has pretty decent support - http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox If you can ditch (or gracefully degrade) IE 9, then you should be fine with Flexbox.
- jessedhillon 11y ago
  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 http://caniuse.com/#feat=flexbox
  - cobalt 11y ago
    IE 10 supports flexbox with the 2012 syntax. There is some wonky behavior, but prefixes will work
- cageface 11y ago
  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.
timdorr 11y ago
I highly recommend Lost Grid: https://github.com/corysimmons/lost 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.
- biscarch 11y ago
  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)
  - deleted 11y ago
    [deleted]
egypturnash 11y ago
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.
- Kiro 11y ago
  How is this more "table-like" than any other grid system?
mfjordvald 11y ago
Does flexbox affect rendering speed of browsers as well or is it mostly about removing the limitations of css grid systems?
christinecha 11y 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...)
- Zekio 11y ago
  very few lines compared to bootstrap, also its is just a grid system unlike Bootstrap which does so much more than just a grid
mholt 11y ago
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.)
- devlint 11y ago
  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...
  - tokenizerrr 11y ago
    Perhaps consider attaching the contents of your dist folder to your github releases.
    - chris_st 11y ago
      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 :-)
      - devlint 11y ago
        The dist folder is already accessible :) In the master on github or via the download button on http://gridlex.devlint.fr http://gridlex.devlint.fr
noir_lord 11y ago
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.
logicuce 11y ago
People have had success with a table layout using css display property as well: http://mdo.github.io/table-grid/ 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?
- deleted 11y ago
  [deleted]
- Tankenstein 11y ago
  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.

89 points by devlint 11y ago

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.

madeofpalk 11y ago
Of course it depends on the industry you're making the site for, Flexbox actually has pretty decent support - http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox If you can ditch (or gracefully degrade) IE 9, then you should be fine with Flexbox.
jessedhillon 11y ago
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 http://caniuse.com/#feat=flexbox
- cobalt 11y ago
  IE 10 supports flexbox with the 2012 syntax. There is some wonky behavior, but prefixes will work
cageface 11y ago
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.

timdorr 11y ago

I highly recommend Lost Grid: https://github.com/corysimmons/lost 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.

biscarch 11y ago
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)
- deleted 11y ago
  [deleted]

egypturnash 11y ago

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.

Kiro 11y ago
How is this more "table-like" than any other grid system?

mfjordvald 11y ago

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

christinecha 11y 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...)

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

mholt 11y ago

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

devlint 11y ago
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...
- tokenizerrr 11y ago
  Perhaps consider attaching the contents of your dist folder to your github releases.
  - chris_st 11y ago
    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 :-)
    - devlint 11y ago
      The dist folder is already accessible :) In the master on github or via the download button on http://gridlex.devlint.fr http://gridlex.devlint.fr

noir_lord 11y ago

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.

logicuce 11y ago

People have had success with a table layout using css display property as well: http://mdo.github.io/table-grid/ 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?

deleted 11y ago
[deleted]
Tankenstein 11y ago
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.