# Laying out a page of LightPane panes
Read `llms/embedding.md` first: it covers the loader, the container and
the identifiers. This covers where to put the containers.
## Widths — these are measured, not preferences
A pane watches its OWN container and re-measures whenever that container
changes width. You never write resize handling.
| Width of the container | What happens |
|---|---|
| under 280px | Compound panes push content outside their own box. Do not do this. |
| 280px | Hard floor. Every kind of pane renders cleanly. |
| 360px | Comfortable minimum — three columns on an inventory pane. |
| 480-720px | The sweet spot. Four to six columns. |
| over ~1400px | Stable, but shows nothing more than it did at 720px. |
A service inventory pane collapses columns from the RIGHT as space runs
out; collapsed columns move into the row's expandable drawer, so nothing
is lost. The FIRST column never collapses. Six columns is the maximum at
any width.
Padding comes off the pane's budget. A 320px phone viewport with 24px
padding each side leaves 272px, which is under the floor.
## The default layout: a reflowing card grid
Use this unless there is a reason not to. No media queries, no JavaScript.
```css
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 16px;
align-items: start;
}
```
```html
```
- `minmax(360px, 1fr)` is what makes it responsive. The browser picks the
column count. Do not replace it with a fixed column count.
- `align-items: start` matters: without it every card in a row stretches
to the tallest, leaving empty space under the shorter panes.
- Do NOT set a height on a pane's container unless you also set
`data-lp-fill="true"`. A pane is as tall as its content, and its content
depends on how many resources the account has. A fixed height clips it.
To let one pane span more room:
```css
@media (min-width: 760px) { .dashboard > .wide { grid-column: span 2; } }
```
## Comparing two accounts, regions or clouds
The same pane twice, pointed at different accounts, in two tinted columns.
```css
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compare > .cell { padding: 12px; border-radius: 6px; }
.compare > .cell:nth-child(odd) { background: #eef3f8; }
.compare > .cell:nth-child(even) { background: #f3f0e8; }
@media (max-width: 820px) { .compare { grid-template-columns: 1fr; } }
```
Cells must alternate in strict pairs or the tinting inverts. ALWAYS put a
visible text label ("Source" / "Target", "AWS" / "GCP") in every cell:
the colour is not available to every reader, and on a narrow screen the
columns stack and there are no columns left to tell apart.
## Height
A pane is as tall as its content. Two consequences:
- A NARROWER pane is TALLER (more wrapping).
- A very WIDE pane can also be taller — panes with charts scale them with
the width.
To fit a pane to a space you control, give the container a real height and
set `data-lp-fill="true"` (fixed header, one scrolling body, fixed footer)
or `data-lp-fill="paged"` with `data-lp-page-size="25"`.
## Hidden and moved panes
- A pane inside a `display:none` parent renders, measures zero width, and
lays out correctly when the parent is shown. Tabs need no special code.
- Moving a pane's element in the DOM works, including into a `