Learn CSS quiz Grid

So I am taking the first quiz for this section and it has a question asking about row height. It list parameters which give the grid a set layout and it also gives a grid gap. I dont remember the exact question but it spanned across two sections and which totaled say 300px and had a gap of 10px so I selected 310px for total and got it correct. It then asks a question about the width. This spanned one section and had the same grid gap but when I added the grid gap to the grid span for width it told me I was incorrect and that I should not have included the grid gap space. When figuring the width for columns do you not include grid gap in your size?

How wide will the .item element be if the following CSS is in effect?

.layout {
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px 200px 100px;
  grid-gap: 10px;
}
.item {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

answer was 200 px. why not figure the grid gap in?

How tall will the .item element be if the following CSS is in effect?

.layout {
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px 200px 100px;
  grid-gap: 10px;
}
.item {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

answer is 310px. why did it add here and not the prior?

it is because the top one only spans one so you do not include a gap? meaning if the second one spanned 2 then it would have then included the gap?

Sounds good when you put it that way. We would not include the gap on a single span.

1 Like