Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Juan Francisco Andrade Álvarez
23,997 PointsWhy the h2 and p elements´ hights do not have the same height as the template row set on the grid definition?
Using the inspector, the h2 and p elements have smaller heights than the ones set on grid-template-rows definition. For example, if I have this one:
grid-template-rows: 100px 200px 100px;
The h2, p and anonymous one should have a height of 100px? Why does the inspector show a height of 44.25px for h2 and 55.22 for p?
Even if not defining the third row, like this:
grid-template-rows: 100px 200px;
The elements have smaller height: 76px and 86.97px.
Thanks for your answers!
2 Answers
David Kanwisher
9,751 Points"grid-template-rows: 100px 200px 100px;"
In this example you have explicitly set a height for the 3rd row of 100px, and from the sound of it, you're confused why the row doesn't appear 100px tall.
When you say that you have heights of 44.25px for <h2> and 55.22px for <p>, this is probably only giving you the height of the CONTENT (the blue area in chrome inspector). If you include the top and bottom MARGIN in your calculation (the orange area in inspector), you should get pretty darn close to 100px total for the height.
Let's say you DON'T specify a 3rd row height.
"grid-template-rows: 100px 200px"
Now the height of the row will depend on the height of the tallest element in the row. (Try it with an h1 vs an h5 for example)
Brett Parsons
4,966 PointsThe row height controls the grid size and that's it. The elements themselves are not affected by the grid-template-rows.