Trying to understand grid-auto-columns

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 :slight_smile:

You’re absolutely correct, and this is a nice detailed description of an issue I know I’ve seen a few people have with this particular grid lesson! I would add that grid essentially favours new rows over new columns. If there’s more elements than provided with the explicit grid layout it will always create a new row unless explicitly forced to create a new column like with your 3/4 positioning on the e element.

I always think of this behaviour as comparable to how datasets generally work (being a data scientist). Reason being that when you are creating a dataset, normal practise is for the rows to be ‘entries’ and columns to be ‘variables’, the same way HTML tables work also. Therefore when new data is to be entered, you want to create a new row with the same existing columns, unless you explicitly require a new column. That’s how I understand it anyway, hopefully that can also help someone else!

1 Like