Why Does My Grid Overflow When Using `grid-template-columns` With Percentages?

Grid Overflows Body with 100% Grid-Template-Columns:

Consider the following code:

<code class="css">.parent {
  position: fixed;
  width: 100%;
  left: 0;
  top: 14px;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 5px;
  background: #eee;
}

.left {
  border: 2px solid red;
}

.right {
  border: 2px solid red;
}</code>

<code class="html"><div class='parent'>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div></code>

With these settings, if the position is fixed, the parent div overflows to the right side of the body. The issue, however, lies not with the width: 100%, but with the grid template.

Solution:

The problem occurs because the grid template splits the available space into 40% and 60%, leaving 5px for the grid gap. This exceeds 100%. To resolve this, use the fr unit instead:

<code class="css">.parent {
  grid-template-columns: 4fr 6fr;
}</code>

With this change, the columns will split the remaining space after accounting for the 5px gap. The parent div will thus fit within the body, even with position: fixed.

The above is the detailed content of Why Does My Grid Overflow When Using `grid-template-columns` With Percentages?. For more information, please follow other related articles on the PHP Chinese website!