Why Does My Grid Container Overflow When Setting `grid-template-columns` to 100%?

Why Grid Display with 100% in Grid-Template-Columns Overflows Body Width

When utilizing CSS grid, it's important to understand the impact of setting the grid-template-columns property to 100% and its relation to the position of the parent container. Let's delve into the issue and its solution.

Consider the following code snippet:

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

With this setup, you may experience a problem where the parent container extends beyond the viewport on the right side when the position is set to fixed. This is not due to the width being set to 100%, but rather the combination of the specified grid-template-columns values and the grid-gap.

The problem arises because the grid-template-columns property divides the available space into two columns, set to 40% and 60% of the parent container's width, respectively. Additionally, the 5px grid-gap introduces extra space between the columns. As a result, the total space allocated to the two columns plus the gap exceeds 100%, causing the parent container to overflow on the right side.

To resolve this issue, you should avoid specifying fixed percentages for the grid columns and instead utilize the fr unit. The fr unit is a fraction-based sizing unit that allows you to distribute the remaining space after accounting for specified widths and gaps.

Here's an example with the adjusted code:

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

In this revised code, the grid-template-columns property is set to 4fr 6fr, indicating that the first column should be 4 units wide, and the second column should be 6 units wide, with the remaining space divided proportionally between them. This ensures that the parent container will not overflow its bounds, regardless of its position.

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