HTML + CSS

Community feedback

• 

  Ctrl+FJ•810

  @FlorianJourdePosted 6 months ago

  Hey man,

  Good job on this one !

  About the bento grid, I think you should have a better layout by using this approach :

  .container {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: grid;
      grid-template: repeat(2, minmax(0, 1fr)) / repeat(4, minmax(0, 1fr));
      gap: 20px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      width: calc(100% - 50px);
  }
  

  With this solution, you layout is already responsive-proof, you only have to alter the grid itself, not the entire layout. Avoiding relative width and height like vw, vh & % is generally a good practice (except for specific cases).

  I would also recommend you to switch you grid to flex and position: static placement. With justify-content and align-items and min-height: 100svh; directly on your body, you must be able to place you grid centered vertically without any issues 🙂

  Good luck for you next challenges ! ✌🏻

  0