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?.
HERE MY CODEPEN: https://codepen.io/ricardonothing/pen/pozmqYO?editors=1000
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
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:
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.
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.