Create and Apply a Layout to Astro Pages

Layouts are the way to create a consistent user experience across different pages within our application.

By default, Astro ships with a <Layout> component that wraps the pages that are generated using the CLI. We'll look at what is already in our page layouts and add a nav and footer to them as well. We'll see that the layout has a <slot /> element which is very similar to Reacts children which is where the html of nested pages will get placed when you use that layout.

Layout's are not automatically applied to pages in an application so we will also see what it looks like to add a layout to the about page that we created before.