Warum läuft mein Grid-Container über, wenn ich „grid-template-columns' auf 100 % setze?

Warum die Rasteranzeige mit 100 % in Raster-Vorlagenspalten die Körperbreite überschreitet

Bei der Verwendung von CSS-Rastern ist es wichtig, die Auswirkungen zu verstehen Möglichkeit, die Eigenschaft „grid-template-columns“ auf 100 % und ihre Beziehung zur Position des übergeordneten Containers zu setzen. Schauen wir uns das Problem und seine Lösung genauer an.

Bedenken Sie den folgenden Codeausschnitt:

<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>

Bei diesem Setup kann es zu einem Problem kommen, bei dem der übergeordnete Container über das Ansichtsfenster auf der rechten Seite hinausragt Seite, wenn die Position auf „Fest“ eingestellt ist. Dies liegt nicht daran, dass die Breite auf 100 % eingestellt ist, sondern an der Kombination der angegebenen Grid-Template-Columns-Werte und der Grid-Lücke.

Das Problem entsteht, weil die Grid-Template-Columns-Eigenschaft teilt Der verfügbare Platz wird in zwei Spalten aufgeteilt, die auf 40 % bzw. 60 % der Breite des übergeordneten Containers eingestellt sind. Darüber hinaus sorgt die 5-Pixel-Rasterlücke für zusätzlichen Abstand zwischen den Spalten. Infolgedessen überschreitet der den beiden Spalten zuzüglich der Lücke zugewiesene Gesamtraum 100 %, was dazu führt, dass der übergeordnete Container auf der rechten Seite überläuft.

Um dieses Problem zu beheben, sollten Sie die Angabe fester Prozentsätze für das Raster vermeiden Spalten und verwenden Sie stattdessen die fr-Einheit. Die fr-Einheit ist eine bruchbasierte Größeneinheit, mit der Sie den verbleibenden Platz nach Berücksichtigung bestimmter Breiten und Lücken verteilen können.

Hier ist ein Beispiel mit dem angepassten 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 In diesem überarbeiteten Code wird die Eigenschaft „grid-template-columns“ auf 4fr 6fr gesetzt, was angibt, dass die erste Spalte 4 Einheiten breit und die zweite Spalte 6 Einheiten breit sein sollte, wobei der verbleibende Raum proportional zwischen ihnen aufgeteilt wird. Dadurch wird sichergestellt, dass der übergeordnete Container unabhängig von seiner Position seine Grenzen nicht überschreitet.

Das obige ist der detaillierte Inhalt vonWarum läuft mein Grid-Container über, wenn ich „grid-template-columns' auf 100 % setze?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!