G is for Grid single page design

Converted a typical 2/3/4 column single page web site to css grid/flexbox

The design is adapted¬†from layout/css codepen by¬†Morten Rand-Hendriksen. I wanted to set up a basic design structure with rows that has columns of content buckets. Flexbox is used for the buckets, so even if css grid isn’t supported the content will still be in columns.

View the page here at http://sullivanlehdesigns.com/play-examples/pagebuilding-2-3-4column.html

This layout doesn’t take advantage of all that css grid will allow us to do. I was curious how easy it would be to change client sites into an easier responsive design until they are ready for a full site redesign. It turns out it’s pretty easy!

Screenshot of part of the page, with rows that use 1, 2, or 3 content buckets
The rows can hold as many buckets desired, and they will be equal sized.

Grab it from github