| Interactive Media Design

Grid Item Positioning with Areas

Preamble

In addition to using grid lines or span for positioning grid items, there is an alternate method by assigning names to areas of the grid.

In a grid container we define the columns, rows and the initial areas using grid-template-columns, grid-template-rows and grid-template-areas properties.

grid-template-areas allows us to define named areas of the grid. In the example below, in keeping with a mobile first approach, we initially define a 1 column, 4 row layout that effectively names each row according to a single column layout.

Each grid item is assigned a corresponding grid-area name that we can use in a media query to adapt the layout.

Example

.grid-container {
    grid-template-areas: 
		“header” 
		“nav” 
		“main” 
		“footer”;
	background-color: rgb(171, 174, 180);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: (repeat(4, 1fr));
}

header {
    background-color: grey;
    grid-area: header;
}

nav {
    background-color: rgb(212, 160, 160);
    grid-area: nav;
}

main {
    background-color: rgb(129, 21, 21);
    grid-area: main
}

footer {
    background-color: rgb(208, 141, 41);
    grid-area: footer
}

@media screen and (min-width: 760px) {
    .grid-container {
        grid-template-areas:
			“header header”
			“nav nav”
			“main main”
			“footer footer”;
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 980px) {
    .grid-container {
        grid-template-areas:
			“header header header”
			“nav main main”
			“nav main main”
			“footer footer footer”;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (min-width: 1200px) {
    .grid-container {
        grid-template-areas:
			“header header header header”
			“nav main main main”
			“nav main main main”
			“footer footer footer footer”;
        grid-template-columns: repeat(4, 1fr);
    }
}

<div class=“grid-container”>
    <header>
        <h1>RWD II CSS Grid - Grid Areas</h1>
    </header>
    <nav>
        <ul>
            <li>Page 1</li>
            <li>Page 2</li>
            <li>Page 3</li>
        </ul>
    </nav>
    <main>
        <h1>Content</h1>
        <h2>Heading 2</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
            scrambled it to make a type specimen book</p>
        <h2>Heading 2</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
            scrambled it to make a type specimen book</p>
        <h2>Heading 2</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
            scrambled it to make a type specimen book</p>

    </main>
    <footer>
        <p>&copy; 2020 Interactive Multimedia Design</p>
    </footer>
</div>

Further Review

See Also