CSS Grid causing horizontal scroll bar

Question

I have a grid that is causing a horizontal scroll bar I do not want, I have tried several things including putting my grid inside other divs. Here is the code in css for the grid.

.page-grid {
      display: grid;
      grid-template-rows: auto auto;
      grid-template-columns: 60% 40%;
      grid-template-areas:
      "ONE TWO"
      "THREE THREE"
       ;
      align-items: center;
      justify-content: center;
      text-align: center;
      grid-gap: 20px;
      margin-top: 70px;
      background: White;
      max-width:100%;
      box-sizing: border-box;
    }

user_13353451 · Answer

With grid-template-columns: 60% 40% you already say that the whole width is supposed to be used. Adding grid-gap: 20px extends it even further, causing the horizontal scroll bar.

Instead you can write grid-template-columns: 3fr 2fr

fr stands for fractions and has basically the same effect, except of not causing the extra pixels needed. It will adjust all the spacing of the grid-gap automatically.

.fractions {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: 20px;
    margin-bottom: 30px;
}
.grid-element {
    height: 80px;
    background: #00ff00;
}

CSS Grid causing horizontal scroll bar

1 Answers