Issues with grid layout


#1

Hello,

I’m building a simple page just to practice with the grid but the results are not what I expected and I don’t understand why.

Here is the link: https://codepen.io/francesca829/pen/vQPWBq

Why the header and the posts are not where they are supposed to be?

Thank you very much!


#2

Nice question @francesca829!

Why the header and the posts are not where they are supposed to be?

Well, you can change the coordinates to do it.

`

grid-template: repeat(9, 1fr) / repeat (9, 1fr);

`
It depends where you want this. You currently have it in this position.

Another factor could be the grid bar, and it then falls into that layout. I don’t see anything wrong with that code. I just think you need to change the coordinates to get it what you want.

I hope this helps =)


#4

Thank you @trevorhodges!

It seems to me that I need to experiment with the grid to fully understand it. The funny part is that more experiments = more questions!


#5

Ok! I’ll be happy to help to the best of my abilities =)


#6

Oh thank you so much for your help! :grinning:

I found out that while I can easily move the first item (header) on the grid, I can’t do it with the second (post1)!
I can’t even assign it to an area.
Maybe it’s something silly but I couldn’t figure it out yet. :frowning:
My code isn’t very different from the code used in the lessons, so why?

Second - I noticed that even if I set width and height of my container, its height changes according to the items’s content. Is it normal? It doesn’t happen so in the lessons.

Here is the code I’m using now (I simplified it): https://codepen.io/francesca829/pen/LXKGgE

Thank you again for your time!


#7

Second - I noticed that even if I set width and height of my container, its height changes according to the items’s content. Is it normal? It doesn’t happen so in the lessons.

Yes. The HTML usually defaults unless you change the width and height.

I found out that while I can easily move the first item (header) on the grid, I can’t do it with the second (post1)!
I can’t even assign it to an area.
Maybe it’s something silly but I couldn’t figure it out yet. :frowning:
My code isn’t very different from the code used in the lessons, so why?

The header is in place already, so if I’m not mistaken, it will probably have to stay like that. Though this so far is better than a lot of my codes. I don’t think its silly, don’t worry. I make mistakes too. If your code is different, that is ok. Just review the lessons to make sure everything is right. If you want to see my mistake, the post is here. The mistake is one too many script tags…

I hope this helps =)


#8

Oh yes! One more thing: It could also depend on the container and header. Code reads from top to bottom so the newer usually get to have what it wants. (Newer as in further down the page)


#9

Hi Trevorhodges :slight_smile:
It helped, yes! I finally got what was wrong. It’s really a beginner mistake. :rofl::sweat_smile:
Now I’m playing with the grid and experimenting different arrangements.

I’m wondering though how many ways there are of building a layout. There is the grid. The flexbox which should be used in conjunction with the grid as far as I know. Are there others?


#10

There are quite a few ways to set up things. First, is simply a basic layout that only goes from top-to-bottom. Take a look at the CSS Course for some of that. I’ll try to get some helping links =)

I hope this helps =)


#11

Thank you very much Trevorhodges. :slight_smile: I must go on with the courses! I’m wrestling with my website these days…:sweat_smile: :wink:


#12

Ok! If you still need help, please let me know! :smiley: