H11 - Grid Layout

01 - Grid is layout in two directions

Flexbox is mainly useful in one direction: a row or a column. CSS Grid is useful when you work with rows and columns at the same time.

Practice with CSS Grid Garden. Play the game to learn the many grid options visually. In this chapter we keep grid simple by using named areas.

Practice

Create a small grid layout and apply this concept to it.
Turn on the grid inspector in the browser and check whether the cells are correct.

02 - The HTML: clear parts

<div class="layout">
    <header>Header</header>
    <nav>Menu</nav>
    <main>Content</main>
    <aside>Side</aside>
    <footer>Footer</footer>
</div>

Practice

Create a small grid layout and apply this concept to it.
Turn on the grid inspector in the browser and check whether the cells are correct.

03 - Give each part a grid-area name

header { grid-area: header; }
nav    { grid-area: menu; }
main   { grid-area: content; }
aside  { grid-area: side; }
footer { grid-area: footer; }

Practice

Create a small grid layout and apply this concept to it.
Turn on the grid inspector in the browser and check whether the cells are correct.

04 - Turn grid on for the container

.layout {
    display: grid;
    gap: 1rem;
}

Practice

Create a small grid layout and apply this concept to it.
Turn on the grid inspector in the browser and check whether the cells are correct.

05 - Draw the layout with grid-template-areas

.layout {
    display: grid;
    grid-template-columns: 200px 1fr 220px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header  header"
        "menu   content side"
        "footer footer  footer";
}

The quoted lines draw the layout. Each word refers to a named area.

Practice

Create a small grid layout and apply this concept to it.
Turn on the grid inspector in the browser and check whether the cells are correct.

06 - The dot means: empty cell

Use a dot when a grid cell should stay empty.

grid-template-areas:
    "header header"
    ".      content"
    "footer footer";

Practice

Create a small grid layout and apply this concept to it.
Turn on the grid inspector in the browser and check whether the cells are correct.

07 - Complete basic example

.layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: 180px 1fr;
    grid-template-areas:
        "header header"
        "menu   content"
        "footer footer";
}

header { grid-area: header; }
nav    { grid-area: menu; }
main   { grid-area: content; }
footer { grid-area: footer; }

Practice

Create a small grid layout and apply this concept to it.
Turn on the grid inspector in the browser and check whether the cells are correct.

08 - Making grid visible in the browser

Browser developer tools can show the invisible grid. In Firefox and Chrome you can inspect the grid container and enable the grid overlay. This helps you see rows, columns, gaps and named areas.

Right-click the layout and choose Inspect.
Select the element with display: grid.
Enable the grid overlay in the developer tools.
Look at the named areas and lines.

Practice

Create a small grid layout and apply this concept to it.
Turn on the grid inspector in the browser and check whether the cells are correct.

09 - Best practices

Use grid for full layouts with rows and columns.
Use clear area names.
Keep the first grid simple.
Use the browser grid overlay when debugging.

Practice

Create a small grid layout and apply this concept to it.
Turn on the grid inspector in the browser and check whether the cells are correct.

10 - Assignment

Practice

Create a page with header, menu, main content, sidebar and footer.
Give each part a grid-area name.
Build the layout with grid-template-areas.
Use the grid overlay in the browser to inspect your layout.

Quiz