Hello! As I was going through the second quiz on the CSS Grid Layout lesson, I stumbled upon this question:
I chose 70px as this was what I thought the reasonable and right answer considering the css ruleset provided by the quiz. When it got red, I was shocked. I read again the provided ruleset to make sure that the
grid-auto-columns property was defined. And it was there. So why the right answer was 100px and not the obvious 70px as the rule stated?
Well, after a bit of consideration I came to the conclusion that when we define columns explicitly with
grid-template-columns, we define the size of every column that sits below the explicitly defined columns, in our case, the 2 columns we’ve been given by the quiz.
Although that was my first thought, I had to test it, so I open a Replit and started experimenting.
As you can see below, I’ve included exactly the code the quiz gave(plus some code to see the grid clearly):
My HTML is pretty simple. Just a container
div with 4
divs inside with a class of box and a class of their respective letter.
When I include the 5th
div, naturally the fifth element should create an implicit row as there isn’t any space available for it to be in the explicit grid. The element indeed creates an implicit row of height 60px, BUT instead of it being 70px as we’ve created an implicit grid, it’s actually 100px.
I scratched my head wondering why it’s 100px and not 70px as I’d clearly stated in my CSS. Well, and please correct me if I’m wrong, I believe that all columns below the first two will be 100px. But if we move the fifth element with line-based positioning to let’s say lines 3 to 4, so we’re creating a new column, then the
grid-auto-columns does it’s magic.
And here’s the result when I apply the line-based placement:
Here we can see that the element ‘E’ is now 70px as we’ve created an implicit column.
Please share any thoughts you might have. I’ve made this topic only because the Codecademy lesson on the implicit grid didn’t mention any behavior like that and that was a bit frustrating.
Have a wonderful day