< Back to page

is for Grid

Full Bleed CSS Grid

A common layout created in css grid

Css grid is an easier way to build responsive pages but some clients aren't ready for a redesign of their site. Until they are, the site can use css grid with the same layout they currently have.

Bucket with image

Image is inside a div with class .bucket-img that has negative margins to counter bucket padding.

Buckets use flexbox

They will stay in the same row when using the class .bucket

Buckets use flexbox

Some content about fabulous things.

The section has the class .color to apply the background color

Buckets match height.

Use class .bucket-wrap so buckets won't be forced all on one line.

Bucket with image

Buckets that wrap have a flex basis applied so the widths can be standardized even with different content. The number of buckets in a row is still dependent on screen width.

An image can go below, too

bucket item
bucket item
bucket item

This example is flex:1 1 10em