Fernando A. Malfavón• 310
@Wlfernando
Posted
I don't gonna lie, it seems a little convoluted. So I going to share with you this grid game and a guide.
- The height with vh unit in body is causing trouble
- The fr unit refers to fractions so use it preferably with integers. Example: 1fr 1fr means 1/2 for each unit; 3fr 1fr 1fr means 3/5 1/5 1/5 as well.
- You don't need to wrap within box2 the box2-2, box4, and box5.
- For each row you can use px in grid-template-row to define the space, like if you use height for each element
With the declaration you have I made a close solution, so you almost there. Just remember that % is related to the measure of parents, vh-vw to the viewport, px is a fixed size, and fr use the available space; you can combine these units in grid-template. Grid is an awsome tool that helps you to avoid wrapping with a lot of divs where the colums is the width and the rows is the height, keep that in mind.
I also did this challenge so you could go and check it with the devTools of your navigator.
Marked as helpful
0
Rustom0• 90
@Rustom0
Posted
@Wlfernando thank you so much let me try to fix it
0
