FAQ: Advanced CSS Grid - Grid Template Areas

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Grid Template Areas” exercise from the lesson “Advanced CSS Grid”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn CSS

FAQs on the exercise Grid Template Areas

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

1 Like
2

I’ve a question:

One task 4 - Use the grid-template-columns property to make the first column 200 pixels wide and the second column 400 pixels wide." Why does this code impact those specific grid sections and not all of them?

.container {
display: grid;
max-width: 900px;
position: relative;
margin: auto;
grid-gap: 10px;
grid-template-areas:
“header header”
“nav nav”
“left right”
“footer footer”;
grid-template-columns:200px 400px;

3

I am guessing that there is some sort of column separation occurring in the Header, nav and Footer sections. However, since those sections have been styled the same between the two columns, we are unable to see the differing column width values.

4

what is the difference between and .
and why doweuse

5

can you explain the elements

6

Is it possible to consolidate grid-template-rows, grid-template-columns, and grid-template-areas into just grid-template?

7

In style.css:

.container {
[…]
margin: auto
[…]

Why is the grid not centered when we expand the browser window?

8

If I’m understanding the question correctly,

“header header” = (header)200px + (header)400px = 600px
“nav nav” = (nav)200px + (nav)400px = 600px
“left right” = (left)200px + (right)400px = 600px
“footer footer” = (footer)200px + (footer)400px = 600px

so grid-template-columns did work on all of them (everything grid-template related)

3 Likes
9

this section feels so daunting. They just throw an entire wall of text at you and don’t bother explaining every step. I feel like this lesson could benefit from being separated into smaller parts.

17 Likes
10

I concur!!! It starts with a great steady explaining/learning pace to, what seems, somebody got bored writing this section or trying to explain things -then started dryly just throwing all the information out there at once…leaving user/learner struggling to piece it all together.
Meaning Codecademy is missing the point on this one. Not actually teaching (helping) they have essentially turned into a monotonous, dull, tedious, collegiate textbook that is simply throwing information out there without considering helpful means of explanation abandoning all thoughtful/creative techniques of information sharing. With no understanding that a ton of information was just put out there that randomly pulls from some areas and that all points seem to do the exact same thing… but not explaining/showing the gradual contextual build up.
Again, leaving the user to try and pull it together. And a collegiate textbook comes with a teacher…this has extremely poor guidance and zero explanation. Would never suggest this section to anyone looking to learn CSS. Book for Dummies would be a better source than this random toss-out of a poorly designed course…

10 Likes
11

Same Here. I am so confused and frustrated with this chapter I just stopped. Without explanations why do they have them doubled all of a sudden like “header header” “nav nav” etc…?
Then how am I suppose to figure what value to put on the rows and columns to get it right?

2 Likes
12

Highly recommend anybody struggling with the example code put it into .html and .css files and look at the results. The visual was hugely helpful when the wall of text didn’t do it for me.

HTML file:

<!DOCTYPE html>
<html>

<link href="./test.css" type="text/css" rel="stylesheet">

<!--TESTING SPACE-->

<div class="container">
  <header>Welcome!</header>
  <nav>Links!</nav>
  <section class="info">Info!</section>
  <section class="services">Services!</section>
  <footer>Contact us!</footer>
</div>

<!--TESTING SPACE-->

</html>

CSS file:

.container {
  display: grid;
  max-width: 900px;
  position: relative;
  margin: auto;
  grid-template-areas: "head head"
                       "nav nav" 
                       "info services"
                       "footer footer";
  grid-template-rows: 300px 120px 800px 120px;
  grid-template-columns: 1fr 3fr; 
}

header {
  grid-area: head;
	background-color: red;
} 

nav {
  grid-area: nav;
	background-color: orange;
} 

.info {
  grid-area: info;
	background-color: yellow;
} 

.services {
  grid-area: services;
	background-color: green;
}

footer {
  grid-area: footer;
	background-color: blue;
}

I added background colours to each of the other CSS rules to help visualize everything and it ended up looking like this (zoomed out to get it all in one screenshot):

image
image573×846 2.65 KB

Also came very close to submitting a bug report because the first instruction wasn’t accepting my answer where I was putting in “head” instead of “header” since that’s what had been written in the example, in case anyone is also experiencing the same oversight!

4 Likes
13

This has not nearly enough explanation, the missing information is that the declaration of a new string creates a new row, and the individual letters or space-separated words within those strings represents columns. That was not explained or explained very well. Codecademy has a habit of giving the same level of explanation to easy things as hard things. For example, Typography was 19 lessons and the box model which is muchhhh more difficult to understand and gets much less explaining. The grid stuff up until this point had the same level of explanation but this thing is much more complex, its the very first time I haven’t intuitively understood the idea they were presenting.

4 Likes
14

I had to go to W3 Schools and get it explained for me to get past this roadblock

15

hi, I was trying to define the columns and rows using shorthand grid-template and it doesn’t seem to work with grid-templates-areas.

.container {
  display: grid;
  max-width: 900px;
  position: relative;
  margin: auto;
  grid-gap: 10px;
  grid-template-areas: "header header"
  "nav nav"
"left right"
"footer footer";
// grid-template-columns: 200px 400px;
// grid-template-rows: 150px 200px 600px 200px;
grid-template: 150px 200px 600px 200px / 200px 400px;
}

and the layout is broken, this is the result:

image
image1193×840 7.97 KB

Couldn’t find any explanation for this, maybe somebody here knows…

3 Likes
16

Hi,

why if I am refactoring code to grid -template I am not getting the same result as I would in separating columns and rows?

Thank you for your help!
.container {
display: grid;
max-width: 900px;
position: relative;
margin: auto;
grid-gap: 10px;
grid-template-areas:
“header header”
“nav nav”
“left right”
“footer footer”;
grid-template: 150px 200px 600px 200px / 200px 400px;

}

h1, h2 {
font-family: monospace;
text-align: center;
}

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

nav {
background-color: beige;
grid-area: nav;
}

.left {
background-color: dodgerblue;
grid-area: left;
}

.right {
background-color: beige;
grid-area: right;
}

footer {
background-color: dodgerblue;
grid-area: footer;
}

3 Likes
18

true, same “problem” here

19

the section asking you to do this:

grid-template-areas: “head head”
“nav nav”
“info services”
“footer footer”;

IS NOT EXPLAINED AT ALL!
my questions:
what the heck is the correct syntax for this?
is the spacing important? is it tabs, spaces… what?
why are we simply typing the same word twice with a space between? what does that ever do? Codecademy a little more context please?

I have typed it EXACTLY as the solution gives after resetting my code and it doesn’t accept it. I even copied and pasted the solution code and without the specifications it doesn’t let you proceed… yet it doesn’t have you put in the specifications until after this first step of typing:

grid-template-areas: “head head”
“nav nav”
“info services”
“footer footer”;

20

image

I input this code and it worked. I thought the lesson was great in telling you what to type; however, it did not explain why. I would really like to know why the sections are in there twice. Any help would be appreciated!

1 Like
21

what the heck is the correct syntax for this?
is the spacing important? is it tabs, spaces… what?

The correct syntax is one space between each class.
Even if you specify 2 identical classes.

So if you have the classes “header” and “item” in the same row, taking one column each, the syntax would be:

grid-template-areas: "header item"

And if you have ONLY the class “header” and you want it to take two columns, the syntax would be:

grid-template-areas: "header header"

why are we simply typing the same word twice with a space between? what does that ever do?

Simply put, the grid-template-areas property allows you to create a layout for your grid, straight from the grid container. It replaces the annoying grid-row/column-start/end property that you were required to specify for each grid item separately.

Now, breath deep, clear your mind, and remember this when you think of grid-template-areas:

The horizontal line with the most classes will define how many columns you have.
The amount of lines with classes specified will define how many rows you have.

image

I have typed it EXACTLY as the solution gives after resetting my code and it doesn’t accept it.

That’s because Codecademy has a mistake in their example.
It’s not grid-template-areas: "head head" but rather grid-template-areas: "header header" because the class name is not head, but header.

When you specify the classes names, you need to specify the exact class name as it appears inside the HTML.

Hope this helped!

@arcsolver61048

8 Likes