Grid quizz Error?

Web Development
1

Hello, I don’t understand my fault on a grid quiz. Especially because there are two questions that contradict. Can someone explain please ?

The quiz :

Imagine we have a grid with the following CSS properties, with 4 boxes inside of it. If we added a fifth box to the HTML, what height would it have?

.grid {  grid-template-rows: repeat(2, 50px);
  grid-template-columns: repeat(2, 100px);
  grid-auto-rows: 60px;
  grid-auto-columns: 70px;}

Your correct answer

60px

Imagine we have a grid with the following CSS properties, with 4 boxes inside of it. If we added a fifth box to the HTML, what width would it have?

.grid {  grid-template-rows: repeat(2, 50px);
  grid-template-columns: repeat(2, 100px);
  grid-auto-rows: 60px; 
  grid-auto-columns: 70px;}

Your answer

60px

Correct answer

100px

Why is it not 70px for this one ?

3 
    .grid {
      grid-template-rows: repeat(2, 50px);
      grid-template-columns: repeat(2, 100px);
      grid-auto-rows: 60px;
      grid-auto-columns: 70px; /* this has no effect at all */
    }

the styles above defines

  • 2 rows of height 50px
  • 2 columns of width 100px (column will be 2 no matter how many element you add)

explanation here: grid-auto-flow

when you add new .box it will result in a new row , not the extra column.
so. for new rows the grid-auto-rows styles applies

1st question :

element will be on 3rd row & first column.
you have height defined for only first 2 rows and not the third one.
so height of 3rd row => 60px

2nd question:

the layout still has 2 columns.
the 5the box will be on 3rd row and first column.
the width of columns is 100px
width of 5th box => 100px

try setting grid-auto-flow: column to .grid