Grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

HTML-CSS
1

Hi there,

Just want your confirmation that when assigning grid lines to grid-area property, the following is correct as stated in the tutorial under " CSS Grid: Use grid-area Without Creating an Areas Template".

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

It seems to me that it should be grid-area: vertical start / horizontal start / vertical end / horizontal end;

Cheers,

2

Hi @yoheioyama!

Welcome to the forum!

It seems right to me but I have always used flexbox way more than grid so I might be wrong.

I have added the challenge link to your post so people can go straight to it.

3

Not sure if using horizontal and vertical as the challenge is, is really the best way of describing it.

The four <grid-line> values:

grid-row-start / grid-column-start / grid-row-end / grid-column-end


1 Like
4

Yeah that’s a good point.

Maybe they chose the words vertical and horizontal here

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

so it was consistent with the instructions for the challenge.
Using the grid-area property, place the element with item5 class between the third and fourth horizontal lines and between the first and fourth vertical lines.

But I guess it could be rewritten like this
grid-row-start / grid-column-start / grid-row-end / grid-column-end

Using the grid-area property, place the element with item5 class between the third and fourth rows and between the first and fourth columns.

1 Like
5

Ah I get it now! I see what the challenge is saying. I agree with Iasjorg, I think it should say row/column lines instead of horizontal/vertical.

Thanks for your time!

1 Like
6

I can open an issue on github and see if there was interest in changing the language to be consistent with the mdn documentation.

Or did you @yoheioyama want to open up the issue since it was your question?

7

I think I misunderstood because I tend to use multiple reference sites, and the other sites might have used different words to describe them. If the grid line concept was introduced using horizontal and vertical lines, I think it should be fine.

Thanks for your consideration!

1 Like