Warum läuft mein Raster über, wenn ich „grid-template-columns“ mit Prozentsätzen verwende?

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

Beachten Sie den folgenden 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>

Wenn bei diesen Einstellungen die Position festgelegt ist, läuft das übergeordnete Div auf die rechte Seite des Körpers über. Das Problem liegt jedoch nicht an der Breite: 100 %, sondern an der Rastervorlage.

Lösung:

Das Problem tritt auf, weil die Rastervorlage das Verfügbare aufteilt Teilen Sie den Raum in 40 % und 60 % auf, so dass 5 Pixel für die Gitterlücke übrig bleiben. Dies liegt über 100 %. Um dieses Problem zu beheben, verwenden Sie stattdessen die fr-Einheit:

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

Mit dieser Änderung teilen die Spalten den verbleibenden Platz nach Berücksichtigung der 5-Pixel-Lücke auf. Das übergeordnete Div passt somit in den Körper, auch wenn die Position „fixed“ ist.

Das obige ist der detaillierte Inhalt vonWarum läuft mein Raster über, wenn ich „grid-template-columns“ mit Prozentsätzen verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!