Why Does My Fixed Positioned Grid Layout Exceed The Body Width?

Fixed Positioned Grid Layout Exceeding Body Width

When using CSS Grid with a fixed position, you may encounter an issue where the grid elements extend beyond the body of the page, particularly when setting the grid-template-columns property to 100%. To understand why this occurs, let's break down the problem and provide a solution.

In your provided CSS code:

.parent {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 40% 60%;
}

You have specified a fixed width of 100% for the parent container, which means it will take up the entire width of the viewable area. The grid-template-columns property sets the width of the grid columns to 40% and 60% respectively.

However, the key issue lies in the positioning. When you set position: fixed to the parent container, it becomes detached from the normal document flow and is placed at its specified coordinates (in this case, at the top-left corner of the page). The browser reserves space for the fixed element, even if its content exceeds the visible area.

This behavior is not related to the width: 100% property. Even if you remove that line, the problem would still exist. The culprit is the grid-template-columns property.

The grid-template-columns property divides the available space into two columns, but you have also specified a grid-gap of 5px between the columns, which adds to the overall width of the grid. In your case, 40% 60% 5px = 105px. This additional 5px pushes the right column's edge outside the viewable area, causing it to appear outside the body.

Solution:

To resolve this issue, you need to calculate the correct percentages for the grid columns, taking into account the grid gap. Instead of using absolute percentages, you can use the fr unit, which represents a fraction of the available space.

.parent {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 4fr 6fr;
}

In this revised code, the 4fr and 6fr values represent 4 and 6 parts of the available space, respectively. The browser will calculate the actual widths of the columns based on these proportions, ensuring that they fit within the parent container, including the grid gap of 5px.

By using the fr unit, you can create a responsive grid layout that adapts to different screen sizes and ensures that the grid elements stay within the body of the page.

The above is the detailed content of Why Does My Fixed Positioned Grid Layout Exceed The Body Width?. For more information, please follow other related articles on the PHP Chinese website!