Time tracking app

Community feedback

• 

  P

  Carl•1,195

  @CarlHummPosted 18 days ago

  Hi there

  Updated answer.

  The total width of your container does not consider the three grid gutters caused by grid-gap, which adds to the grid size overflowing the section and body. Your minimum grid size 800px, but your next breakpoint for adapting layout is 768px.

  repeat(4, minmax(20rem, 1fr))
  

  At minimum, the grid can be 4 x 200 = 800px. At maximum it can be [viewport] / 4 until it reaches 1116px (Your containers max-width).

  So if we are at 800px viewport. Your grid will be divided into four. 800 / 4 = 200. Does this take into account grid-gap and gutters? No, you should factor this into the calculations for deciding on minimum column sizes.

  So you have three grid gutters each 32px wide. That's 3x32 = 96.

  800 + 96 = 896.

  Overflows between 768 and 896

  How do we know this is accurate? By hovering over the element in dev tools whilst between 768 and 896px viewports. The container will show a width of 896px regardless (overflowing section) but will show 897 if you enlarge viewport.

  Because we don't use auto-fill or auto-fit, there is no wrapping so that minimum number for your column widths sets a fixed size for your grid. This should align with your media queries (768px).

  You can add some padding-inline to the section to provide space between the grid and viewport without contributing towards size.

  Good luck on future projects :)

  0