Bucket with image
Image is inside a div with class .bucket-img that has negative margins to counter bucket padding.
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.
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.
.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
This example is flex:1 1 10em