Layouts
Zero-media-query layout primitives that map to Web Awesome CSS utilities: grid, stack, cluster, split, flank, and frame.
Grid
Auto-adaptive columns
Children wrap based on min column size — resize the window to see it reflow.
::::grid gap:l min:200px
===accent
# One
Wraps responsively.
===
===accent
# Two
No media queries.
===
===accent
# Three
Auto columns.
===
::::
One
Wraps responsively.
Two
No media queries.
Three
Auto columns.
Stack
Vertical rhythm
Consistent vertical spacing between blocks.
::::stack gap:m
:::info
First item
:::
:::success
Second item
:::
:::warning
Third item
:::
::::
First item
Second item
Third item
Cluster
Wrapping tag row
Inline items that wrap — great for tag clouds and button rows.
::::cluster gap:s
@@@brand
Ruby
@@@
@@@success
Jekyll
@@@
@@@neutral
Eleventy
@@@
@@@warning
Markdown
@@@
::::
Split
Opposite ends
Pushes children to opposite ends of the row — the classic header/footer pattern. Put HTML or components (not bare Markdown) directly inside layout containers.
::::split
<strong>© 2026 Markawesome</strong>
<span><a href="/privacy">Privacy</a> · <a href="/terms">Terms</a></span>
::::
Flank
Sidebar + content
::::flank start size:160px gap:l
<img src="../assets/thumb.jpg" alt="Thumbnail">
:::info
The 160px sidebar stays fixed while the content flexes — both wrap to one column on narrow screens.
:::
::::
The 160px sidebar stays fixed while the content flexes — both wrap to one column on narrow screens.
Frame
Aspect ratio: landscape
::::frame landscape radius:l
<img src="../assets/photo.jpg" alt="landscape frame">
::::
Aspect ratio: portrait
::::frame portrait radius:l
<img src="../assets/photo.jpg" alt="portrait frame">
::::
Aspect ratio: square
::::frame square radius:l
<img src="../assets/photo.jpg" alt="square frame">
::::