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!
