#Trouble Creating A Grid Layout

7 messages · Page 1 of 1 (latest)

main onyx
#

Hey everybody, I'm trying to create a grid layout as seen in the image here where it says "The bright future of Web 3.0". If I have a grid like so:

grid-container {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

I know you can have the "Bright Future of Web 3.0" span 2 rows, but this also pushes the button down. How do you create this general layout of one taller item in a column, and in the column next to it 2 elements?
grid-news-final.png
hard dawn
#

I think you need a 3x3 layout (not 2x2 as you suggested) - something like:

  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr) auto;
main onyx
#

Ok thanks I will try that. I made some tweaks and changed the whole main section flex rather than grid, as I had a grid inside a grid and while I know that works it was messing me up a bit

#

So this is what it looks like when its 3x3

grid-test.png
#

What I really am trying is to get that "Read More" button higher up, almost as if it was in the cell with the small paragraph.

#

Hmmm got it by accident, have the header spanning 2 rows and gave it padding on the right

hard dawn
#

It looks like you've achieved what you're looking for... if you still need a hand maybe setup a scrim so I can see where you're at and can help.