So while I was taking the quiz from Learn CSS: Grid section, I found some questions I couldn’t figure out how they work that way. Can someone explain how so please?
-
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;
}
The answer it gives is “100px”, which I don’t get it. Shouldn’t it be 70px instead? -
Imagine we have a grid with 2 explicitly defined rows and 2 explicitly defined columns and no other grid properties set in the CSS, with the following divs inside of it. If we added a
Eto the HTML after box D, where would box E appear on the page?
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
The answer it provides is “It would appear underneath box C in a new row”. How do I visualize this question? I considered it as an 2*2 matrix, and had them in order like:
A B
C D
If this is the case, could answer also be “It would appear underneath box D in a new row” (this is an option in the question) since C and D are in the same row?