{% raw %}
# Layout
Layout uses CSS Grid and Flexbox: one shared page shell with a small set of approved content layouts inside it. New pages pick one of these rather than inventing a structure.
## The page shell
Every page is wrapped by `base.html` in the same four-part shell, from top to bottom:
1. **Fixed top nav** (`.topnav`, height `--nav-height` = `56px`, `position: fixed`, `z-index: var(--z-nav)`). Always on screen, never re-implemented per page.
2. **Breadcrumb** (`.breadcrumb`, optional but expected). It renders only when the page supplies two or more crumbs. Clearing the fixed nav is handled once by `body { padding-top: var(--nav-height) }`, so every page sits below the header whether or not it has a breadcrumb. See [Consistency rules](/docs/styles-consistency.html).
3. **Content root** (``, `max-width: var(--max-content)` = `1200px`, centred, `padding: 1rem`). All page content lives inside this one element.
4. **Footer** (`.site-footer`), rendered from the `footer` block.
```text
+-----------------------------------------------+ .topnav (fixed, 56px)
| Dev[Place] Home Posts News ... bell user |
+-----------------------------------------------+
| Home / Feed | .breadcrumb (clears the nav)
| +-----------------------------------------+ |
| | | | max 1200px, centred
| | [ one approved layout goes here ] | |
| +-----------------------------------------+ |
| site footer |
+-----------------------------------------------+
```
A page never re-declares `max-width: 1200px`, never adds a second centred wrapper, and never rebuilds the nav or footer. It supplies exactly one layout container inside `.page`.
## Approved layouts
### 1. Three-column app layout (the default)
The feed / posts page: a fixed-width left sidebar, a fluid main column, and a fixed-width right rail.
```css
.feed-layout {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr 280px; /* 240px | fluid | 280px */
gap: 1.5rem;
align-items: start;
}
@media (max-width: 1024px) {
.feed-layout { grid-template-columns: 1fr; } /* collapse to one column */
.feed-right { display: none; } /* drop the right rail */
}
```
```text
<div class="feed-layout">
<aside class="sidebar-card"> ... </aside> left: navigation/filters (240px)
<div class="feed-main"> ... </div> centre: primary content (fluid)
<aside class="feed-right"> ... </aside> right: stats/context (280px, sticky)
</div>
```
Rules for this layout: the two side columns are `
Three-column app layout (resize the window below 600px to see it collapse, mirroring the real 1024px rule)
Sidebar<aside> 240px
Main content1fr, min-width: 0
Right rail280px, sticky
Single-column card list
A card. --bg-card, --border, --radius-lg, padding 1rem.