CSS-Abstände definieren
Wenn Sie Grid-, Flexbox- oder Mehrspaltenlayouts mit CSS-Gap-Eigenschaften erstellen, können Sie Abstände zwischen Spalten und Zeilen festlegen und steuern.
Während die Eigenschaften margin und padding den sichtbaren Abstand um einzelne Boxen festlegen, können Sie mit den Eigenschaften des CSS-Gaps-Moduls Abstände zwischen benachbarten Boxen in Layouts mit Zwischenräumen festlegen.
Dieser Leitfaden erläutert Spalten- und Zeilenabstände in verschiedenen Layouttypen, wie Sie Abstände festlegen und wie Sie Prozentwerte als Wert für gap verwenden.
Abstände verstehen
Mit margin und padding lassen sich Abstände um einzelne Boxen festlegen. Manchmal ist es jedoch praktischer, Abstände zwischen benachbarten Boxen innerhalb eines Layouts festzulegen. Das gilt insbesondere dann, wenn sich der Abstand zwischen benachbarten Boxen vom Abstand zwischen der ersten oder letzten Box und dem Rand des Containers unterscheidet.
Die Eigenschaft gap und ihre Teil-Eigenschaften row-gap und column-gap bieten diese Möglichkeit für Grid-, Flexbox- und Mehrspaltenlayouts.
Ein Abstand ist entweder ein Spaltenabstand oder ein Zeilenabstand. Ihre Bedeutung variiert je nach Layouttyp. Bei allen Layouttypen entfällt ein Abstand, wenn er mit einem Fragmentierungsumbruch zusammenfällt.
Abstände in Grid-Containern
Bei einem Grid-Container bezeichnen Zeilenabstände und Spaltenabstände die Zwischenräume zwischen Grid-Zeilen beziehungsweise Grid-Spalten. Durch die Breite dieser Abstände verhalten sich die betroffenen Grid-Linien so, als hätten sie eine Dicke: Der Grid-Track zwischen zwei Grid-Linien ist der Bereich zwischen den Zwischenräumen, die diese Linien darstellen. Standardmäßig beträgt die Breite des Abstands in beiden Richtungen 0.
Bei der Größenberechnung der Tracks wird jeder Zwischenraum als zusätzlicher, leerer Track mit fester Größe behandelt. Ein Grid-Element, das sich über mehrere Zeilen oder Spalten erstreckt, überspannt auch die dazwischenliegenden Zwischenräume.
Wenn beispielsweise gap: 20px für ein 4×4-Grid aus Boxen mit einer Größe von jeweils 100px mal 100px festgelegt ist, hat das Grid eine Größe von 460px mal 460px. Jede Box ist zwar 100px mal 100px groß, aber ein Grid-Element, das sich über zwei Zeilen erstreckt, hat eine Höhe von 220px. Erstreckt es sich über drei Zeilen, beträgt seine Höhe 340px. Erstreckt es sich über alle vier Zeilen, beträgt seine Höhe 460px.
Die Zwischenräume legen den Mindestabstand zwischen Elementen fest. Durch Werte der Eigenschaften justify-content und align-content kann zusätzlicher Platz entstehen, wodurch sich die entsprechenden Abstände vergrößern.
Zwischenräume treten nur zwischen Tracks des impliziten Grids auf. Wird ein Grid zwischen Tracks fragmentiert, wird zwischen diesen Tracks kein Zwischenraum eingefügt. Vor dem ersten und nach dem letzten Track gibt es keinen Zwischenraum. Ein zusammengeklappter Track hat ebenfalls keinen Zwischenraum.
Abstände in Flex-Containern
Flex-Container entstehen, indem display für ein Element mit mehreren Kindelementen auf flex oder inline-flex gesetzt wird. Standardmäßig werden Flex-Elemente in einer einzigen Zeile ohne Umbruch angeordnet. Der standardmäßige Abstand zwischen benachbarten Flex-Elementen und – bei einem Umbruch – zwischen benachbarten Spalten oder Zeilen beträgt 0. Ob ein Flex-Container mit mehreren Elementen Spalten, Zeilen oder beides enthält, hängt von der mit der Kurzschreibweise flex-flow festgelegten Flussrichtung und dem Umbruchverhalten ab.
Sie können entlang der Hauptachse Abstände zwischen benachbarten Flex-Elementen hinzufügen. Wenn die Eigenschaft flex-flow auf row wrap oder row-reverse wrap gesetzt ist, bezeichnet der Spaltenabstand den Zwischenraum zwischen benachbarten Flex-Elementen und der Zeilenabstand den Zwischenraum zwischen Flex-Zeilen. Ist flex-flow auf column wrap oder column-reverse wrap gesetzt, bezeichnet der Zeilenabstand den Zwischenraum zwischen benachbarten Flex-Elementen und der Spaltenabstand den Zwischenraum zwischen Flex-Zeilen.
Abstände in Mehrspaltenlayouts
Mehrspalten-Container sind Blockelemente mit mehr als einer Spalte, die durch einen Wert größer als 1 für column-count entstehen. Standardmäßig werden Spalten in einer einzigen Zeile angeordnet, wobei zwischen benachbarten Spalten ein Spaltenabstand von 1em liegt. Der Zeilenabstand ist der Zwischenraum zwischen Zeilen von Spalten-Boxen, die entstehen, wenn ein Wert für column-height festgelegt wird, der einen Umbruch der Spalten und damit zusätzliche Zeilen erfordert.
Die Kurzschreibweise gap verwenden
Die Eigenschaft row-gap legt die Größe des Abstands (Zwischenraums) zwischen benachbarten Zeilen innerhalb eines Containers fest. Die Eigenschaft column-gap legt die Größe des Abstands zwischen den Spalten eines Containers fest. Für jede Eigenschaft kann ein <length>-Wert, ein <percentage>-Wert oder das Schlüsselwort normal angegeben werden. Prozentwerte werden anhand der Größe der Inhaltsbox des Container-Elements in der jeweiligen Dimension berechnet.
Die Kurzschreibweise gap legt sowohl Zeilen- als auch Spaltenabstände fest und akzeptiert einen oder zwei Werte. Der Standardwert ist für beide Teil-Eigenschaften normal. Wird nur ein Wert angegeben, gilt er für Zeilen- und Spaltenabstände. Werden zwei Werte angegeben, legt der erste den Wert von row-gap und der zweite den Wert von column-gap fest.
Die Wirkung der Festlegung hängt davon ab, ob der Container ein Grid-, Flexbox- oder Mehrspaltenlayout verwendet.
Sie können sichtbare Trennlinien zu Abständen hinzufügen; diese werden als Gap-Dekorationen bezeichnet. Wenn Sie dekorative Linien für Abstände zwischen Spalten, Zeilen oder beidem hinzufügen, erscheinen sie in der Mitte des jeweiligen Abstands. Sie wirken sich weder auf die Größe des Abstands noch auf die Größe des Containers aus. Diese Gap-Dekorationen werden dem ansonsten „leeren Raum“ mithilfe der Kurzschreibweise rule oder ihrer Teil-Eigenschaften hinzugefügt.
Abstände in Grid-Layouts
In Grid-Containern legt die Eigenschaft gap die Größe der Zwischenräume zwischen vertikalen und horizontalen Tracks fest. Für die Kurzschreibweise wird ein Wert für <'row-gap'> angegeben, auf den optional ein Wert für <'column-gap'> folgt. Wird nur ein Wert angegeben, gilt er für Zeilen- und Spaltenabstände.
In diesem Beispiel erstellen wir einen Grid-Container mit sieben Spalten:
.container {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
Wählen Sie verschiedene Werte für gap aus, um zu sehen, wie sich die Abstände zwischen Zeilen und Spalten ändern:
Abstände in Flexbox-Layouts
In Flex-Containern legt die Eigenschaft gap den Abstand zwischen Flex-Elementen und zwischen Flex-Zeilen fest. Ob der erste Wert den Abstand zwischen Flex-Elementen oder zwischen Flex-Zeilen festlegt, hängt von der Richtung ab, in der die Flex-Elemente angeordnet sind.
Flex-Elemente werden abhängig vom Wert der Eigenschaft flex-direction in Zeilen oder Spalten angeordnet. Ist sie auf row oder row-reverse gesetzt, definiert der erste Wert den Abstand zwischen Flex-Zeilen und der zweite den Abstand zwischen benachbarten Flex-Elementen innerhalb einer Zeile. Wird nur ein Wert angegeben, gilt er für beide Abstände.
Ist flex-direction auf column oder column-reverse gesetzt, definiert der erste Wert den Abstand zwischen benachbarten Flex-Elementen innerhalb einer Flex-Zeile und der zweite die Abstände zwischen Flex-Zeilen. Auch hier gilt ein einzelner Wert für beide Abstände.
In diesem Beispiel erstellen wir einen Flex-Container und erlauben den Umbruch der Flex-Elemente:
.container {
display: flex;
flex-wrap: wrap;
max-width: 300px;
height: 500px;
}
Wählen Sie verschiedene Werte für gap und flex-direction aus, um zu sehen, wie sich die Abstände zwischen Flex-Elementen und Flex-Zeilen ändern:
Abstände in Mehrspaltenlayouts
In CSS-Mehrspaltenlayouts legt die Eigenschaft gap den Zwischenraum zwischen Spalten und zwischen Zeilen von Spalten fest. Der erste Wert definiert den Abstand zwischen Zeilen von Spalten-Boxen, sofern durch die Eigenschaft column-height mehrere Zeilen entstehen. Der zweite Wert definiert den Abstand zwischen benachbarten Spalten-Boxen.
In diesem Beispiel erstellen wir mithilfe der Kurzschreibweise columns einen Mehrspalten-Container mit maximal sieben Spalten und einer Mindestbreite von 1em pro Spalte. Eine Spaltenhöhe von 2.35em ermöglicht zusätzliche Zeilen. Außerdem fügen wir mit der Eigenschaft rule eine dünne dekorative Linie in der Mitte des Abstands hinzu:
Standardmäßig beträgt der Abstand zwischen Zeilen und Spalten 1em. Ändern Sie ihn, indem Sie verschiedene Werte für gap auswählen:
Die Zwischenräume können größer als der angegebene Abstand erscheinen, weil die Buchstaben den ihnen zugewiesenen Platz nicht vollständig ausfüllen. Die dekorative Linie erscheint in der Mitte des Abstands, je nach gewählter Einstellung entweder 0.25em oder 1.5em vom Block- und Inline-Anfang des Inhalts der Spalte beziehungsweise Zeile entfernt. Der zusätzliche Leerraum befindet sich am Block- und Inline-Ende, wodurch die Abstände größer wirken, als sie sind.
Prozentwerte für Abstände angeben
Wenn ein Container eine feste Größe hat, werden als Prozentwerte angegebene Spalten- und Zeilenabstände relativ zur Breite beziehungsweise Höhe des Containers berechnet.
In diesem Beispiel ist die Größe des Containers festgelegt. Wählen Sie verschiedene prozentuale Abstände aus und ändern Sie den Layouttyp, um zu sehen, wie die Abstände relativ zur Containergröße berechnet werden. Spaltenabstände von 1% und 5% sind 3px beziehungsweise 15px breit. Zeilenabstände von 1% und 5% sind 6px beziehungsweise 30px hoch. Diese Abstände gelten auch dann, wenn der Inhalt über den Container hinausragt.
.container {
width: 300px;
height: 600px;
background-color: #eeeeee;
rule: 1px dotted #666666;
}
Beachten Sie: Wenn Sie für die Eigenschaft gap einen einzelnen Prozentwert festlegen, ist der Zeilenabstand doppelt so groß wie der Spaltenabstand, weil der Container doppelt so hoch wie breit ist.
Wenn für den Container keine Höhe oder Breite festgelegt ist, verhalten sich prozentuale Abstände ganz anders. Hat der Container eine feste Breite, sind prozentuale Abstände vorhersehbar.
Wird die Größe des Containers automatisch bestimmt, können prozentuale Abstände eine zirkuläre Abhängigkeit erzeugen: Die Abstände hängen von der Containergröße ab, die Containergröße aber wiederum von den Abständen. Browser behandeln prozentuale Abstände bei der intrinsischen Größenberechnung als auto (effektiv 0).
.container {
background-color: #eeeeee;
rule: 1px dotted #666666;
height: auto;
width: auto;
}
Im Beispiel wird die Breite des Containers durch den umschließenden Block begrenzt, seine Höhe jedoch nicht.
Da Prozentwerte bei der intrinsischen Größenberechnung für Abstände im Grid-Layout als auto behandelt werden, entfällt der Abstand zunächst, bis die Größe des Containers feststeht. Das bedeutet, dass die Containergröße ausschließlich anhand der Abmessungen des Inhalts bestimmt wird. Wenn das Beispiel sechs Zeilen mit Grid-Zellen darstellt, gibt es fünf Zeilenabstände. Dadurch ragt die letzte Zeile der Grid-Elemente um 5% oder 25% über den Hintergrund hinaus, je nachdem, ob der Abstand auf 1% oder 5% gesetzt ist.
In Flexbox-Layouts werden prozentuale Abstände bei der intrinsischen Größenberechnung als 0 behandelt oder ignoriert. Der Abstand wird erst nach der Größenberechnung angewendet. Da die Blockgröße des Containers auto ist, werden die prozentualen Zeilenabstände anhand von 0 aufgelöst; 1% oder 5% von 0 ergeben also 0. Prozentwerte werden faktisch ignoriert – row-gap beträgt sowohl in Flexbox- als auch in Mehrspaltenlayouts 0.