«Return to Blog ListFlexBox Grid for Website Themes
I’ve been meaning for a year or two to update my site development to use FlexBox for layout rather than Foundation’s old(?) float-based column layouts. Recently I came across a FlexBox grid that was close to what I needed, so I tinkered with it until it would meet my needs for page layouts. I got nested grids to work the way I want and made some other changes, so now I’m developing a FlexBox-based theme I’ll call EvoFlexbox. Hopefully I’ll have it ready to go when my next design / development project starts in another few days.
One of the things that excited me about FlexBox is that columns inside a flex container automatically appear the same height by default, most apparent when using nested grids. With float-based columns, it was necessary to use some occasionally unreliable javascript to make equal height columns. I’m not against using javascript, but I like that it’s no longer necessary in this case.
I’m making the demo available for download (an HTML page with CSS included in the head), if anyone would like to use it as a basis for toying with a FlexBox Grid. You can view it in your browser here. [UPDATE, DEC. 2024: Also, this website uses the same grid, although the nested grids in use on the site are for two-column arrangement of portfolio examples, which are not shown on the grid demo.]
Also, for reference, CSS Tricks has a comprehensive FlexBox guide.
