How to Gatsby: The Complete Course/

...

/

Layouts

Layouts

Learn what layouts are in Gatsby and how to use them.

We'll cover the following...

Introduction to layouts

The concept of layouts is not particular to Gatsby. A layout is a simple React component, and it follows React’s compositional model of importing and using any other components.

Layouts let us build pages and screens that look uniform. With layouts, we can have pages that use the same reusable components that should display uniformly on multiple pages. These components include headers and navigation bars, footers, side navigation, and so on.

What are layouts?

Layouts are simple components that accept a children prop and render the children alongside any common components or styling.

Usage

Below is an example of a simple layout component:

Press + to interact
import React from 'react'
const Layout = ({ children }) => {
  return (
    <div className='mainWrapper' style={someCustomStyling}>
      <Header />
      <main>
        {children}
      </main>
      <Footer />
    </div>
  )
}
export default Layout

Importing desired components

A traditional approach to using layouts is to import them and use in page components, like this:

Press + to interact
import React from "react"
import Layout from "Layout"
const AboutPage = () => {
  return (
    <Layout>
      <p>A minimal about page</p>
    </Layout>
  )
}
export default AboutPage

This is the current and default implementation in the latest Gatsby versions in our current project. We can see the layout component in the src/components/layount.js file, and we can see it used in ...