Learn CSS Grid by Building a Magazine - Step 39 (and 41)

HTML-CSS
1

Hello all,

when entering the required property grid-template-columns the .author container shifts to the right despite being placed before the .social-icons container in the html code. Trying to figure out why that happened, but couldn’t find the reason. Per my understanding .social-icons container should have actually been shifted to the right instead. Hope you can help me out. I assume when I understand the output of that step I would also get the output of the step 41 in relation. Thanks in advance!

2

please include a link to the step or code you are talking about.

3

Sorry, new to the forum. There you go:

Step 39

and

Step 41

4

the way grid works is it splits up the content based on the rows and columns it has.
Since we told the browser that we want a grid of 2 equal columns, the children of .heading are distributed 1-by-1 into the cells from left to right by default.

So if the grid looks like this:

Column 1 Column 2
.hero element here .author here
.social here

This order is based on the order given in the html (unless you change it explicitly).

5

Big thanks! :handshake: I have found the error in my thought and now understand the logic behind the outputs of both steps.

2 Likes