Can anyone explain to me how grid-template-area does? I seems to can’t understand it.
The grid-template-areas is defined like this:
grid-template-areas: “header header”
“nav nav”
“left right”
“footer footer”;
the reason why it is written header header is because it has 2 columns and the header is spanning through the 2 columns, if it had 3 columns instead and we wanted the header the nav and the footer to span the 3 columns it would be written like this:
grid-template-areas: “header header header”
“nav nav nav”
“left center right”
“footer footer footer”;
and if you wanted to have the header span 2 columns and another div to take the last column, it would be written like this:
grid-template-areas: “header header div”
“nav nav nav”
“left center right”
“footer footer footer”;
in another exemple, if this only had one column, if would be written like this instead:
grid-templates-areas: “header”
“nav”
“left”
“footer”;
so each group of words between the quotes is a row and the amount of times you repeat that class name inside of it will define how many columns it will span.
keep in mind that the other properties are important too in the .container for it to render your code properly!
3 Likes
The .container has a max-width: 900px; declaration which is adding invisible width to the grid. If you add background-color: black; for example, you will be able to see it.
The grid itself is centred. You can see this if you give it a visible background color. The reason it doesn’t look centred is because its columns don’t take up the full width
If you wanted to layout your entire page using CSS grid, couldn’t you simply make the <body> element a grid container, or would it be better to wrap all your content in a <div> which acts like a grid container?
Well, this lesson was not very helpful. Kudos to roisql and csharpalos for their answers.
2 things that helped me:
-
The lesson on “grid item” in W3school.
-
This Mozilla page: grid-template-areas - CSS: Cascading Style Sheets | MDN
It brought the very important information that the areas HAVE TO BE RECTANGLE. you can’t have:
“header header”
“nav header”
This reverse “L” shape is not supported.
Hope this helps
1 Like
why does it have to be double named and in quotes?why not just head nav etc.
“head head”
“nav nav”
etc.
Not sure where to go from here, on this question
‘Use the grid-template-columns property to make the first column 200 pixels wide and the second column 400 pixels wide.’
I entered ‘grid-template-columns: 200px 400px;’
Now I know it’s right because I checked the solution, but it keeps saying I’m wrong, I even copypasted the solution (exactly the same as my answer) just to make sure, still says I am wrong. Don’t know what to do to e honest.
Edit: So it’s the question before, the areas question, which I got right because it gave me a tick but if you look at the image the number of spaces between the words are not exactly the same as the solution, so it gave me a tick, but failed me on the next question which had the right answer as well.
Hi, I notice one thing, may only is a simple wrong, but it can do somebody turns confused, when you follow the simple way of code, this works all right:
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-rows: 150px 200px 600px 200px;
grid-template-columns: 200px 400px;
}
However when you try to do a shorthand code like this:
.example {
grid-template: 150px 200px 600px 200px / 200px 400px;
}
The code in this lesson shows an error, why?
Hi,
I found these articles helpful in understanding grid-template-areas:
Understanding CSS Grid: Grid Template Areas
Link: Understanding CSS Grid: Grid Template Areas — Smashing Magazine
A Complete Guide to Grid
Link: A Complete Guide to Grid | CSS-Tricks - CSS-Tricks
CSS Grid Template Areas In Action
Link: CSS Grid Template Areas In Action - Ahmad Shadeed
Here is a graphic that illustrates the correspondence between rows and columns
Hope this is helpful.
Best Regards,
3 Likes
Another resource: https://css-tricks.com/guides/
Nice explanation.
If only the course instructors had clarified this in the first place in the writeup for grid-areas.
1 Like
Thank you! very helpful
In the Grid Template Areas exercise, we used grid-template-columns: 200px 400px; and grid-template-rows: 150px 200px 600px 200px; to define the width and height of the grid. I was wondering why I was unable to replace with the grid-template shorthand grid-template: 150px 200px 600px 200px / 200px 400px; to achieve the same end product.
Any help or clarification is much appreciated!
can you use “grid-template” to determine the grid instead of “grid-template-rows” & "grid-template-columns"?
My practice code was the following:
body{
display: grid;
margin: 10px;
min-height: 100vh;
gap: 10px;
grid-template-areas:
"header header header header"
"main main main aside"
"twin1 twin1 twin2 twin2"
"footer footer footer footer";
grid-template-rows: 20% 30% 30% 20%;
grid-template-columns: repeat(4, 1fr);
}
At the beginning I was using “grid-template” to make the code shorter, but it didn’t work. Then I used the same layout by using the code above and it worked as it was supposed to.
Are the grid-template and grid-template-areas incompatible?
I know others have already mentioned this, but I thought I’d just reiterate: this exercise is seriously lacking in instruction. It really doesn’t explain at all how this new concept works. 
1 Like
The solution is that:
grid-template:
“header header” 150px
“nav nav” 200px
“left right” 600px
“footer footer” 200px / 200px 400px;
1 Like
The solution is :
grid-template:
“header header” 150px
“nav nav” 200px
“left right” 600px
“footer footer” 200px / 200px 400px;
1 Like
Some should give @roisql and award and add the explanation into the exercise.
The explanation for reference;
WAY clearer than what codecademy has put together. This section definitely requires a review from teaching staff.
Although I found this lesson difficult and lacking in explanation, I did understand it after some time puzzling it out. What I don’t understand is why you would build a website like this? There’s no practical application given, and it seems difficult and unreadable, when code is meant to be simplified where possible. Also, this is a section about responsive sites, and we are putting in fixed pixel widths and heights, so this grid isn’t even responsive. Which again leaves me asking, why do it this way at all?