Subgrid column alignment
direct on grid
Row 1: col-half col-end
in subgrid
Row 2 left: col-half (in subgrid)
Row 2 right: col-half col-end (in subgrid)
direct on grid
Row 3: col-third
Row 3: col-two-thirds col-end
in subgrid
Row 4: col-third (in subgrid)
Row 4: col-two-thirds col-end (in subgrid)
Full-bleed
direct on grid
full-bleed (direct child of .grid)
in subgrid
full-bleed (inside .subgrid)
Full-bleed-content
direct on grid
full-bleed-content (direct child of .grid)
bleed-absolute child should span viewport
in subgrid
full-bleed-content (inside .subgrid) — THE HERO CASE
bleed-absolute child should span viewport
Immersive
direct on grid
immersive (direct child of .grid)
in subgrid
immersive (inside .subgrid)
Immersive-content
direct on grid
immersive-content (direct child of .grid)
bleed-absolute child should span container max-width
in subgrid
immersive-content (inside .subgrid)
bleed-absolute child should span container max-width
SplitFeature nesting
col-full subgrid → two col-half children
image panel: col-full / large:col-half
text panel: col-full / medium:col-8 / large:col-half
reference halves (direct on grid)
col-half (direct)
col-half col-end (direct)
ContentBanner nesting
immersive-content subgrid with nested col-center subgrid
text: col-full / large:col-two-thirds col-start
action: col-full / large:col-third col-end
col-# col-center
reference
col-full
col-2 / medium:col-10 col-center
col-2 / medium:col-5 col-center