Layout & grid
The custom percentage grid (container / row / col-70 col-s-100, plus row--center etc.) has been removed. Page layout is handled by Umbraco's Block Grid, and custom markup uses Tailwind grid utilities.
Page layout
You rarely write layout markup for blocks yourself — the page template renders the whole grid and Igloo's blocks size themselves on the 12-column Block Grid:
@await Html.GetBlockGridHtmlAsync(Model, "content")
See Create a new widget and the Block Grid docs for how blocks and column spans work.
Containers
Container classes set the max width from the Design's width variables and centre the content:
<div class="container">Standard width (--container-width)</div>
<div class="container-sm">Small (--container-width-small)</div>
<div class="container-lg">Big (--container-width-big)</div>
<div class="container-fluid">Full width</div>
Grid (Tailwind)
For multi-column layouts inside a block, use Tailwind's grid utilities. Igloo's blocks use a 12-column grid with responsive prefixes — for example the contact form:
<div class="grid grid-cols-12 gap-8">
<div class="col-span-12 md:col-span-6">Half on tablet/desktop, full on mobile</div>
<div class="col-span-12 md:col-span-6">Half on tablet/desktop, full on mobile</div>
<div class="col-span-12 md:col-start-4 md:col-span-6">Offset using col-start</div>
</div>
grid-cols-1–grid-cols-12 are available, with the usual Tailwind responsive prefixes (sm: md: lg: xl: 2xl:), gap-*, col-span-* and col-start-*. See the Tailwind grid documentation.
Rows & spacing helpers
| Class | Purpose |
|---|---|
row | A flex row (flex flex-row flex-wrap) for simple inline layouts. |
component | Applies the standard block padding (--component-spacing). Added automatically by <igloo-block-wrap>. |
For everything else (alignment, gaps, ordering, visibility) use Tailwind utilities directly — see Helpers.