Help with this simple CSS Grid!

I Want to do a grid like this:

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?.



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.

1 Like


Thanks a lot! your solution is very elegant!.

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

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.

Update CodePen:

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.

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

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