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 () 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 () below!
Agree with a comment or answer? Like () to up-vote the contribution!
The instructions on this sections give us a grid area code that says:
.item {
grid-area: 2 / 3 / 4 / span 5;
}
Then tells us that the following will have the columns spanning from “3 to 8”. If the logic in the section before is correct, then would it not span from “3 to 7”? Could you help me if I’m mistaken? Thanks!
What I think is going on here - this is an example - is that like in a few exercises before this one when we were using grid-row-start and grid-row-end, we had to enter the row (or column) # one after where we actually wanted it to end. So for example:
.item {
grid-row-start: 4;
grid-row-end: 6;
}
…would span the item 2 rows (4 and 5). So we could refactor this code to be:
.item {
grid-row: 4 / span 2;
}
So now if we think about this current exercise using that same reasoning, when they say the column spans from 3 to 8, I think they are speaking of 8 as the column where the item ends, but does not actually take up column 8, it only spans the 5 columns of 3,4,5,6,7.
I too was stumped on this. I did not understand where it mentions in the directions of where span 3 and then 1 would be added?
From what I interpreted the directions give:
In style.css , create a rule set for class c . Use grid-area to make this item take up the eighth column and rows six, seven and eight. Use span for both ending values.
I thought it was meant to be interpreted as: grid-area: 6 / 7 / span 8;
…then explains that the item will “occupy” 3 through 8, so if its actually “occupying” those columns then I could read that to be
.item {
grid-column-start: 3;
grid-column-end: 9;
}
. Which leads me to believe they are not counting column 3 as one of the 5 being spanned (4,5,6,7,8 are the 5 spanned).
Now, in Instruction # 2 they are clearly including row 6 as one of the 3 spanned. It states “…this item take up the eighth column and rows six, seven, and eight.”
.c {
grid-area: 6 / 8 / span 3 / span 1;
}
So, if I were to read this as it was explained in the exercise I would start counting the 3 spanned at 7 (7,8,9). Which could also be read as:
.c {
grid-row-start: 6;
grid-row-end: 10;
}
I do still think it is confusing as to where you’re suppose to start counting the span from, the column/row it start from, or the column/row immediately following the starting point??? After reviewing the prior exercise #13. Grid Column…When counting the spans, you start counting at the starting column/row.
Adding to the discussion about how grid layout work in CSS in case of looking for an interactive the below link can help a lot. https://grid.layoutit.com/
I would say not to worry about it too much. I’ve come to find out doing the exercises, when you look at the results of your css, and you see it’s not exactly where it should be, either a little too far right, or down etc. Then you know where to go and change the number to one more or one less (or larger difference if necessary).
I am in the same situation as you, i aslo thought it was: grid-area: 6 / 7 / span 8;
but there is the red writing that tells me “This item should start in column 8”.
And I don’t understand it, can someone help plsss?
grid-area takes four values separated by / in the format:
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column end;
The instructions for the exercise state: Use grid-area to make this item take up the eighth column and rows six, seven and eight. Use span for both ending values.
Understanding of the instruction: The item (div with class=“box c”) should take up the Eighth column. Just one column. The eighth one. The second part of the instruction states “rows six, seven and eight”. So, the item should occupy these three rows.
Translating the above understanding into numbers means: the grid-row-start value should be “6”. The grid-row-end value should be “span 3” so that three rows (6, 7, 8) are occupied by the item. The grid-column-start value should be “8” because we want the item to occupy column 8. The grid-column-end value should be “span 1” which means the item should only occupy column 8.
Putting these numbers into the correct order gives us:
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column end;
grid-area: 6 / 8 / span 3 / span 1;
This is probably a dumb question, but is the repeat() function only compatible with grid-template-columns and grid-template-rows?
The reason I ask is because when I reached part 3 of the instructions (where we are asked to refactor the CSS code for the .a selector to use grid-area), I used repeat(), presuming it can be used universally within CSS syntax. In other words, I wrote:
.a {
grid-area: 5 / 1 repeat(2, / span 2);
}
which didn’t work, whereas
.a {
grid-area: 5 / 1 / span 2 / span 2;
}
worked just fine.
Of course, in this case using repeat() would obviously not be any more practical than manually repeating / span 2. However, since I instinctively used repeat() without giving it much thought, I am just curious about the contextual limitations of repeat() in CSS code.
What feedback message is displaying at the bottom of the page? Sometimes, the feedback can help figure out the issue. Maybe, try deleting the extra space before the closing semicolon.
Hi !
I just finished this chapter and even if it’s seems ok on a theorical point of view, I tried some test on my own with my code editor and it"s quite confusing especially with the grid-row and grid-column.
Are we agree that :
grid-row : 4 / span 6 ;
It will start the box line 4 of the container ==> and will ended line 10 ?
grid column: 2 / span 2;
will start column n° 2 and will ended N°4 ?
Of course depending of the grid-template value on the container, the height and size will be different ?
) below.
) to up-vote the contribution!
