CSS Grid Layout cookbook

One giant image pushes my whole grid layout out of shape, and max-width:100% didn't fix it.

My header, sidebar, main content and footer are each a separate mess of floats and heights that never quite line up.

I default to nested flexboxes for everything, then fight margin hacks to line things up that Grid would handle directly.

My photo grid leaves ragged gaps under the shorter images instead of packing them tight like Pinterest does.

Every widget on my dashboard is the same size, so the one metric that actually matters doesn't stand out.

I reordered items visually with Grid, and now keyboard users tab through the page in a totally different order than what they see.

One card has three lines of description, so its button sits lower than every other card in the row.