Skip to content

Grid Named Template Areas

Jump to bottom
Daisho Komiyama edited this page Feb 22, 2022 · 2 revisions

This article shows you how to use grid named template areas. Using named template makes your life a bit easier than using just numbers: grid-template-columns: 80px auto 40px;

Grid named template layout

HTML

<body>
    <header>Header</header>
    <nav>Nav</nav>
    <article>Article</article>
    <aside>Aside</aside>
    <footer>Footer</footer>
</body>

CSS

body {
    width: 30%;
    margin: 2em auto;
    display: grid;
    gap: 1em .5em;
    grid-template-areas:
        "my-header my-header my-header"
        "my-nav my-article my-aside"
        "my-footer my-footer my-footer";
    grid-template-rows: 4em 10em 4em;
    grid-template-columns: 100px 1fr .5fr;
}
body * {
    background: grey;
    color: #fff;
    text-align: center;
}
header {
    grid-area: my-header;
}
nav {
    grid-area: my-nav;
}
article {
    grid-area: my-article;
}
aside {
    grid-area: my-aside;
}
footer {
    grid-area: my-footer;
}

As the example above shows, you can name elements and use them to define layout. It would be more obvious this way.

Menu

Clone this wiki locally