Doubt in CSS Grid: Please Help

#1

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

I cannot understand whats exactly going on here! please help me out

Thanks for every single response :slight_smile:

#2

Can you attach a link?

#3

Sure Brother,

https://www.codecademy.com/courses/learn-css-grid/lessons/css-grid-ii/exercises/grid-template-areas?action=resume_content_item&course_redirect=learn-css

#4

its explained within the lesson:

The grid-template-areas property allows you to name sections of your web page to use as values in the grid-row-start, grid-row-end, grid-col-start,grid-col-end, and grid-area properties.

it allows us to name sections on our webpage, which is really neat to help us layout our grid

#5

Thanks for the Response :slight_smile:

But Sir I cannot understand this

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

I cannot understand this part why we have written head twice nav twice footer twice but info and services once please explain

#6

here are some good examples:

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

head and nav both span two rows, while info and service only span one row each.

#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.