AstroHow-ToBeginner · 3 min read

How to Create Layout in Astro: Simple Guide with Examples

In Astro, create a layout by making a component with a where page content goes, then wrap your pages with this layout component using . This lets you reuse headers, footers, or sidebars easily across pages.

📐

Syntax

To create a layout in Astro, define a component with a <slot /> tag where the page content will be inserted. Then, import and wrap your page content inside this layout component.

Parts explained:

<slot />: Placeholder for child content inside the layout.
Layout component: A reusable wrapper for consistent page structure.
Page file: Imports and uses the layout to wrap its content.

astro

--- Layout.astro ---
---
// No frontmatter needed here
---
<html lang="en">
  <head>
    <title>My Site</title>
  </head>
  <body>
    <header>
      <h1>Site Header</h1>
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <p>© 2024 My Site</p>
    </footer>
  </body>
</html>

--- Page.astro ---
---
import Layout from './Layout.astro'
---
<Layout>
  <h2>Welcome to the homepage</h2>
  <p>This is the main content.</p>
</Layout>

Output

<html lang="en"> <head> <title>My Site</title> </head> <body> <header> <h1>Site Header</h1> </header> <main> <h2>Welcome to the homepage</h2> <p>This is the main content.</p> </main> <footer> <p>© 2024 My Site</p> </footer> </body> </html>

💻

Example

This example shows a simple layout component with a header and footer. The page content is inserted inside the <slot />. This keeps your site structure consistent and easy to update.

astro

--- src/components/Layout.astro ---
---
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Astro Layout Example</title>
  </head>
  <body>
    <header style="background:#333;color:#fff;padding:1rem;">
      <h1>My Astro Site</h1>
    </header>
    <main style="padding:1rem;">
      <slot />
    </main>
    <footer style="background:#333;color:#fff;padding:1rem;text-align:center;">
      <small>© 2024 Astro Layout</small>
    </footer>
  </body>
</html>

--- src/pages/index.astro ---
---
import Layout from '../components/Layout.astro'
---
<Layout>
  <h2>Home Page</h2>
  <p>This content is inside the layout.</p>
</Layout>

Output

<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Astro Layout Example</title> </head> <body> <header style="background:#333;color:#fff;padding:1rem;"> <h1>My Astro Site</h1> </header> <main style="padding:1rem;"> <h2>Home Page</h2> <p>This content is inside the layout.</p> </main> <footer style="background:#333;color:#fff;padding:1rem;text-align:center;"> <small>© 2024 Astro Layout</small> </footer> </body> </html>

⚠️

Common Pitfalls

Common mistakes when creating layouts in Astro include:

Forgetting to include <slot /> in the layout, which causes page content not to render.
Not importing the layout component correctly in the page file.
Wrapping content without a layout component, losing consistent structure.

astro

--- Wrong Layout (missing slot) ---
<html>
  <body>
    <header>Header</header>
    <!-- Missing <slot /> here -->
    <footer>Footer</footer>
  </body>
</html>

--- Correct Layout ---
<html>
  <body>
    <header>Header</header>
    <slot />
    <footer>Footer</footer>
  </body>
</html>

📊

Quick Reference

Tips for creating layouts in Astro:

Always use <slot /> to insert page content.
Import your layout component in pages and wrap content inside it.
Use layouts to keep headers, footers, and navigation consistent.
Layouts can be nested for complex structures.

✅

Key Takeaways

Create a layout component with a to hold page content.

Wrap your page content inside the layout component to reuse structure.

Always include in layouts to display child content.

Import layouts correctly in your pages to apply them.

Use layouts to keep site design consistent and easy to maintain.