Bento Grid solution

Community feedback

• 

  Fernando A. Malfavón•370

  @WlfernandoPosted about 1 month ago

  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•110

  @Rustom0Posted about 1 month ago

  @Wlfernando thank you so much let me try to fix it

  0