# HTML flex, grid, floats and columns in PDF

HTML blocks lay out like a web page: flex rows, grids with named areas, floats that text wraps around, balanced columns and positioned boxes.

A flex row of cards, a grid with named areas, a float that text wraps around, balanced columns with a spanning heading and a positioned badge. Toggle: html_blocks.

- PDF: https://legivel.com/examples/text-structure/html-layout-flex-grid.pdf
- Page: https://legivel.com/examples/text-structure/html-layout-flex-grid
- Open in the editor: https://legivel.com/markdown-to-pdf?sample=html-layout
- More markdown text and structure in PDF: https://legivel.com/examples/text-structure

## Markdown source

```markdown
# HTML layout

HTML blocks lay out like a browser page: flex rows, grids, floats, columns and positioned boxes, then break across PDF pages.

## Flex row

<div style="display:flex;gap:12px">
<div style="flex:1;padding:12px;border-radius:8px;background:#ecfdf5;border:1px solid #6ee7b7"><b style="color:#047857">Orders</b><div style="font-size:24px;font-weight:bold">1,284</div><div style="color:#047857">+12% on last week</div></div>
<div style="flex:1;padding:12px;border-radius:8px;background:#eff6ff;border:1px solid #93c5fd"><b style="color:#1d4ed8">Revenue</b><div style="font-size:24px;font-weight:bold">€86,410</div><div style="color:#1d4ed8">+4% on last week</div></div>
<div style="flex:1;padding:12px;border-radius:8px;background:#fef2f2;border:1px solid #fca5a5"><b style="color:#b91c1c">Returns</b><div style="font-size:24px;font-weight:bold">37</div><div style="color:#b91c1c">−3% on last week</div></div>
</div>

## Grid with named areas

<div style="display:grid;grid-template-columns:150px 1fr;grid-template-rows:auto 1fr;grid-template-areas:'side head' 'side main';gap:8px">
<div style="grid-area:head;background:#1e3a5f;color:white;padding:10px;border-radius:6px"><b>Harbour Line Logistics</b> · weekly operations summary</div>
<div style="grid-area:side;background:#f1f5f9;padding:10px;border-radius:6px;font-size:13px">Depots<br>Rotterdam<br>Gdańsk<br>Valencia<br>Piraeus</div>
<div style="grid-area:main;padding:10px;border:1px solid #cbd5e1;border-radius:6px">All four depots met their dispatch window. Valencia ran a second shift on Thursday to clear the backlog from the port strike.</div>
</div>

## Float with text wrap

<div><div style="float:right;width:170px;margin:0 0 8px 14px;padding:10px;background:#fffbeb;border-left:4px solid #f59e0b;font-style:italic">“We cut the average dock wait from 41 to 18 minutes.”</div><p style="margin:0">Text wraps around a floated box the way it does on a web page. The quote sits at the right edge, and each line beside it gets shorter so nothing overlaps. When the text passes the bottom of the float, the lines take the full width again. This paragraph is long enough to show both: the narrow lines next to the quote and the full lines below it, where the measure returns to the width of the page.</p></div>

## Columns with a spanning heading

<div style="column-count:3;column-gap:20px;column-rule:1px solid #cbd5e1">
<p style="margin:0 0 8px">Columns balance their text, so all three end at nearly the same height. A heading with column-span: all cuts the set in two and runs across the full width.</p>
<h3 style="column-span:all;margin:6px 0;padding:4px 8px;background:#e0e7ff;color:#3730a3">Spanning heading</h3>
<p style="margin:0 0 8px">The text after the heading starts a second balanced set. Rules between the columns come from column-rule, and the gap from column-gap.</p>
</div>

## Positioned badge

<div style="position:relative;margin-top:16px;padding:14px;border:1px solid #cbd5e1;border-radius:8px">
<span style="position:absolute;top:-10px;right:12px;padding:2px 10px;border-radius:10px;background:#dc2626;color:white;font-size:12px;font-weight:bold">URGENT</span>
Container 7 needs customs papers before Friday. The red badge sits on the box's top border, outside the normal flow of the text.
</div>
```