The contained banner-over-cards layout as it is today. Expect most boxes off the raster: this is the baseline the other scenarios improve on.
measuring…One line of body copy.
Two or three lines of body copy — long enough to wrap at most widths, so the card is taller than its neighbour.
One line of body copy.
<Grid rhythm> without any component opting in: text leading quantises, but the boxes keep their own padding, so heights may still be fractional.
measuring…One line of body copy.
Two or three lines of body copy — long enough to wrap at most widths, so the card is taller than its neighbour.
One line of body copy.
The grid scope AND rhythm on the Banner and every Card. Every box should be green: whole-line heights, and each row starting on a line.
measuring…One line of body copy.
Two or three lines of body copy — long enough to wrap at most widths, so the card is taller than its neighbour.
One line of body copy.
Same composition in a smaller Container with two card columns. Widths change, line counts shouldn't break.
measuring…One line of body copy.
Two or three lines of body copy — long enough to wrap at most widths, so the card is taller than its neighbour.
One card per row — the mobile stack at any width. Offsets accumulate down the column, so one fractional box shows up as every box below it turning red.
measuring…One line of body copy.