Flexbox responsive grid

See project description »

Responsive Grid with Flexbox

Resize this browser window to see how the Grid changes from desktop to tablet to mobile layouts.

Basic Grid


Sidebar and main content

auto
auto
auto

Left / Center / Right content alignment


Nesting

auto

Vertical alignment

This cell should be top-aligned.
Vice keytar actually DIY Thundercats. Flannel heirloom lo-fi Blue Bottle Intelligentsia pour-over Etsy church-key banh mi Marfa lomo yr messenger bag.Artisan try-hard food truck +1 Cosby sweater.
Letterpress YOLO Austin Pinterest Helvetica. Cliche pug literally, church-key 90's twee you probably haven't heard of them meh fixie cornhole banh mi pork belly mustache. Stumptown bespoke Vice, bitters sustainable hoodie Echo Park letterpress 8-bit pug. Quinoa meh flexitarian roof party, actually selvage Carles put a bird on it umami vegan ethical.
This cell should be center-aligned.
Vice keytar actually DIY Thundercats. Flannel heirloom lo-fi Blue Bottle Intelligentsia pour-over Etsy church-key banh mi Marfa lomo yr messenger bag.Artisan try-hard food truck +1 Cosby sweater.
Letterpress YOLO Austin Pinterest Helvetica. Cliche pug literally, church-key 90's twee you probably haven't heard of them meh fixie cornhole banh mi pork belly mustache. Stumptown bespoke Vice, bitters sustainable hoodie Echo Park letterpress 8-bit pug. Quinoa meh flexitarian roof party, actually selvage Carles put a bird on it umami vegan ethical.
This cell should be bottom-aligned.
Vice keytar actually DIY Thundercats. Flannel heirloom lo-fi Blue Bottle Intelligentsia pour-over Etsy church-key banh mi Marfa lomo yr messenger bag.Artisan try-hard food truck +1 Cosby sweater.
Letterpress YOLO Austin Pinterest Helvetica. Cliche pug literally, church-key 90's twee you probably haven't heard of them meh fixie cornhole banh mi pork belly mustache. Stumptown bespoke Vice, bitters sustainable hoodie Echo Park letterpress 8-bit pug. Quinoa meh flexitarian roof party, actually selvage Carles put a bird on it umami vegan ethical.

Holly Grail page layout

Note: in responsive view Aside 1 and Aside 2 elements stack below the Main content.

Header / Logo
Main

Salvia Helvetica ethical lo-fi, artisan messenger bag put a bird on it. Photo booth taxidermy kale chips, Carles Thundercats retro blog paleo. 8-bit four loko jean shorts, church-key tattooed bespoke normcore art party salvia organic vinyl letterpress distillery. You probably haven't heard of them tofu food truck, Echo Park salvia Schlitz heirloom scenester ennui biodiesel Intelligentsia +1 church-key. Bitters meh actually quinoa, YOLO pug authentic. Kitsch health goth paleo, pop-up tofu authentic gluten-free whatever yr Brooklyn irony. Banjo Tumblr you probably haven't heard of them literally aesthetic, wolf put a bird on it Kickstarter yr.

Footer
Copyright Jelly-o apple pie pie chocolatebar.com