How to use CSS Grid’s grid-template-area to reorder html elements based in viewport size

Ashley R. Clifton
Jun 5 · 3 min read
Image for post
Image for post

While working on the FordLabs site, my pair partner and I came across a seemingly sticky situation. We had three elements which needed to be arranged horizontally in the order of [1] [2] [3] on both tablet and desktop screens, but then arranged vertically in the order of [1] [3] [2] on mobile.

Now, while we could have used some funky JavaScript to reorder the elements or used extra HTML and CSS to hide and show elements based on viewport size, I was familiar enough with CSS grid to think, “There has to be a simpler way to do this.” Lucky for us, there was: grid-template-areas.

Problem: reorder html elements based on viewport size

Solution: CSS Grid and grid-template-areas

How we did it:

I will be giving a simplified code example to demonstrate how we handled this situation. The result will be a responsive grid that looks something like this:

Image for post
Image for post
CSS Grid code example of rearranging elements based on viewport size.

Here is all the HTML we will need for this example.

<div class="css-grid">
<div class="grid-item-1">Thing 1</div>
<div class="grid-item-2">Thing 2</div>
<div class="grid-item-3">Thing 3</div>
</div>

For the CSS, we will start by giving the surrounding div a display: grid, and grid-gap: 1rem. Next we will add the grid-template-areas.

How grid-template-areas work is by assigning a name reference to each grid item class using the CSS grid grid-area property, and then arranging those elements by name using the grid-template-areas property on the parent class.

I am writing this CSS mobile first so we will begin with the vertical grid. Grid template areas recognize each new string as a new row, so all we have to do is order our elements like you see below.

.css-grid {
display: grid;
grid-gap: 1rem;
grid-template-areas: 'gridItem1'
'gridItem3'
'gridItem2';
...
}
.grid-item-1 {
grid-area: gridItem1;
...
}
.grid-item-2 {
grid-area: gridItem2;
...
}
.grid-item-3 {
grid-area: gridItem3;
...
}

At this point, the grid layout will look something like this:

Image for post
Image for post
Example of using CSS Grid grid-template-areas to create a vertical grid for mobile view

Now, on tablet and desktop, we want our items to be arranged horizontally. Within the appropriate media query, we will put all of the grid item names within one string after our grid-template-areas property, in the order that we desire.

.css-grid {
display: grid;
grid-gap: 1rem;
/* Mobile */
grid-template-areas: 'gridItem1'
'gridItem3'
'gridItem2';
...
}
/* Tablet / Desktop */
@media (min-width: 768px) {
.css-grid {
grid-template-areas: 'gridItem1 gridItem2 gridItem3';
...
}
}

And that is all my pair partner and I had to do!

Just for kicks, though, I will throw in one more CSS example and reorder the grid for tablet view as well.

.css-grid {
display: grid;
grid-gap: 1rem;
/* Mobile */
grid-template-areas: 'gridItem1'
'gridItem3'
'gridItem2';
...
}
/* Tablet */
@media (min-width: 768px) {
.css-grid {
grid-template-areas: 'gridItem3 gridItem2 gridItem1';
...
}
}

/* Desktop */
@media (min-width: 992px) {
.css-grid {
grid-template-areas: 'gridItem1 gridItem2 gridItem3';
...
}
}
Image for post
Image for post
CSS Grid code example of rearranging elements based on viewport size

And there you have it! A simple way to arrange HTML elements using only CSS.

For a live demo that you can interact with, feel free to take a look at this codepen:

Happy Coding!

FordLabs

Collborative Problem Solvers

Ashley R. Clifton

Written by

Full stack software engineer

FordLabs

FordLabs

FordLabs is a software incubation group within Ford Motor Company, whose mission is to develop innovative software through human centered design, lean validation, and XP software development.

Ashley R. Clifton

Written by

Full stack software engineer

FordLabs

FordLabs

FordLabs is a software incubation group within Ford Motor Company, whose mission is to develop innovative software through human centered design, lean validation, and XP software development.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store