--- title: "Astro Layouts" description: "Template inheritance — wrap pages in shared structure without repeating yourself." kind: guide maturity: evergreen confidence: high origin: ai-drafted author: "Agent" directedBy: "krow" tags: [astro, fundamentals] published: 2026-03-15 modified: 2026-06-13 wordCount: 1239 readingTime: 6 series: "learn-astro" series_order: 5 prerequisites: [astro-components] url: https://krowdev.com/guide/astro-layouts/ --- ## Agent Context - Canonical: https://krowdev.com/guide/astro-layouts/ - Markdown: https://krowdev.com/guide/astro-layouts.md - Full corpus: https://krowdev.com/llms-full.txt - Kind: guide - Maturity: evergreen - Confidence: high - Origin: ai-drafted - Author: Agent - Directed by: krow - Published: 2026-03-15 - Modified: 2026-06-13 - Words: 1239 (6 min read) - Tags: astro, fundamentals - Series: learn-astro (#5) - Prerequisites: astro-components - Content map: - h2: Layouts Are Components That Wrap Pages - h2: A Minimal Layout - h2: Layout Composition (Extending) - h2: Real Example: The Full Layout Chain - h2: How Pages Use Layouts - h2: Layouts vs. Components - h2: Sources - Diagrams: Mermaid fences are paired with adjacent ASCII companions in this document (1 Mermaid, 1 ASCII); HTML figures expose rendered SVG plus copyable Mermaid/ASCII source tabs. - Crawl policy: same canonical content is exposed through HTML, Markdown, and llms-full; no crawler-specific content gate. ## Layouts Are Components That Wrap Pages Layouts are a specific pattern on top of [components](/guide/astro-components/). Once you have layouts down, move on to [content collections](/guide/astro-content-collections/) and [styling](/guide/astro-styling/). For the wider context start at the [mental model](/guide/astro-mental-model/). A layout is just a component that provides the shared structure (html tag, head, header, footer) and uses `` for page-specific content. :::analogy **LaTeX:** A `documentclass` defines margins, fonts, header/footer. Your content goes in `\begin{document}...\end{document}`. **Astro:** A layout defines ``, ``, header, footer. Your content goes in ``. ```latex \documentclass{article} ← Layout \begin{document} Your content here ← \end{document} ``` ::: ## A Minimal Layout ```astro --- // src/layouts/Base.astro interface Props { title: string; } const { title } = Astro.props; --- {title}
krowdev
© 2026
``` Using it: ```astro --- // src/pages/about.astro import Base from '../layouts/Base.astro'; ---

About

This replaces in Base.astro

``` ## Layout Composition (Extending) Layouts can wrap other layouts. krowdev uses a two-layer system: ```mermaid graph TD accTitle: krowdev's two-layer layout system accDescr: Base.astro provides the html shell, header, a content slot, and footer. KBEntry wraps Base, adding a three-column grid and its own slot for article markdown. base["Base.astro"] base --> head1["<html>, <head>, meta tags"] base --> header["Header (nav, logo, theme toggle)"] base --> bslot["<slot /> — KBEntry fills this"] base --> footer["Footer"] kb["KBEntry.astro (uses Base)"] kb --> callbase["Calls <Base title={title}>"] kb --> grid["3-column grid: sidebar | content | ToC"] kb --> kbslot["<slot /> — article markdown fills this"] ``` ```ascii Base.astro ├── , , meta tags ├── Header (nav, logo, theme toggle) ├── ← KBEntry.astro fills this └── Footer KBEntry.astro (uses Base) ├── Calls ├── 3-column grid: sidebar | content | ToC └── ← actual article markdown fills this ``` ```astro --- // src/layouts/KBEntry.astro import Base from './Base.astro'; import SeriesSidebar from '../components/SeriesSidebar.astro'; import TableOfContents from '../components/TableOfContents.astro'; const { title, headings } = Astro.props; ---

{title}

``` :::key The chain is: **Page → Layout → Layout → HTML**. Each layer adds structure and passes content down through ``. No duplication — the `` tag, header, and footer exist in exactly one file (`Base.astro`). ::: ## Real Example: The Full Layout Chain This is the exact code that renders the page you're reading right now. Toggle to see how 3 files compose into one page:

KB entry layout chain

**1. Page** — `src/pages/[kind]/[...slug].astro` ```astro --- import { getCollection, render } from 'astro:content'; import KBEntry from '../../layouts/KBEntry.astro'; export async function getStaticPaths() { const entries = await getCollection('kb'); return entries.map(entry => ({ params: { kind: entry.data.kind, slug: entry.id }, props: { entry }, })); } const { entry } = Astro.props; const { Content, headings } = await render(entry); --- ``` **2. Layout** — `src/layouts/KBEntry.astro` (wraps the page) ```astro --- import Base from './Base.astro'; import SeriesSidebar from '../components/SeriesSidebar.astro'; import TableOfContents from '../components/TableOfContents.astro'; const { title, headings } = Astro.props; ---

{title}

``` **3. Root Layout** — `src/layouts/Base.astro` (wraps everything) ```astro --- import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro'; import '../styles/global.css'; const { title } = Astro.props; --- {title} — krowdev