Help with this simple CSS Grid!

HTML-CSS
#1

I Want to do a grid like this:

HelpGrid
HelpGrid785Ă—393 93.3 KB

i create the grid but i have a few problems, i dont know how to solve it. I need to creat a good gap and put the text in order like the image.
Can you help me?.

HERE MY CODEPEN: https://codepen.io/ricardonothing/pen/pozmqYO?editors=1000

#2

Hi.
https://www.w3schools.com/css/css_grid.asp

#3

You have made the row 100px that isn’t enough for all the text. Making the columns fix width often isn’t a good idea and isn’t really needed.

.grid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1160px;
  margin: 30px auto 0 auto;
}

Check out the Grid course by Wes Bos, read the Grid docs on MDN and check out the CSS Tricks article.

Edit: Here is a quick example using auto-fit and minmax to make the layout responsive.
https://codepen.io/lasjorg/pen/yLBmrQz

1 Like
#4

Goodbye.

https://genius.com

#5

Thanks a lot! your solution is very elegant!.

#6

No problem happy to help.

The auto-fit minmax grid is super useful and as it doesn’t need any media queries it makes for less code. It is sort of like using flex-wrap.

1 Like
#7

But there is a big mess in the layout when i tried to put a H3 (Habe a Healthy Meal) over the grid, like in the example “Have a Healthy Meals”. All the grid moves to another side.

updatecodepe
updatecodepe999Ă—661 114 KB

Update CodePen: https://codepen.io/ricardonothing/pen/pozmqYO?editors=1100

Thanks in advance and sorry for ask to much!.
i’m already waching Web Bos’tutorials and trying to understand all this world, and writing a lot of notes.

#8

If you look at the Codepen example I gave, you can see I have a container for each of the “cards”. You need to give each of the h3 and p elements a container.

1 Like
#9

Sorry, i swear i didn’t see that link! my apologize!. Thanks again. Now i can see my mistakes.

#10