Die Gap-Eigenschaft in CSS ist eine Abkürzung für row-gapund column-gapunter Angabe der Größe der Dachrinnen. Dies ist der Abstand zwischen Zeilen und Spalten in Raster-, Flex- und mehrspaltigen Layouts.
/* Grid layout */ .container ( display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; ) /* Flex layout */ .container ( display: flex; gap: 10%; ) /* Multi-column layout */ .container ( column-count: 5; gap: 20px; )
Verwenden Sie den Schieberegler in der Demo unten, um die gapEigenschaft in Aktion zu sehen:
Syntax
gap akzeptiert einen oder zwei Werte:
- Ein einzelner Wert setzt beide
row-gapundcolumn-gapdenselben Wert. - Wenn zwei Werte verwendet werden, setzt der erste den
row-gapund der zweite dencolumn-gap.
.container ( gap: 1rem; /* Is equivalent to: * row-gap: 1rem; * column-gap: 1rem */ gap: 10px 15%; /* Is equivalent to: * row-gap: 10px; * column-gap: 15%; */ )Die Spezifikation für das CSS-Rasterlayoutmodul definierte den Abstand zwischen Rasterspuren mithilfe der grid-gapEigenschaft. gapsoll es ersetzen, damit Lücken in mehreren CSS-Layoutmethoden wie Flexbox definiert werden können, muss aber grid-gapdennoch in Fällen verwendet werden, in denen ein Browser möglicherweise implementiert grid-gaphat, die neuere gapEigenschaft jedoch noch nicht unterstützt .
Werte
gap akzeptiert die folgenden Werte:
normal: (Standard) Der Browser gibt einen verwendeten Wert von 1em für mehrspaltiges Layout und 0px für alle anderen Layoutkontexte (z. B. Raster und Flex) an.: Gültig und nicht negative CSS Länge, wie Jederpx,em,remund%unter anderem.: Die Größe der Lücke als nicht negativer Prozentwert relativ zur Dimension des Elements. (Einzelheiten siehe unten.)initial: Wendet die Standardeinstellung der Eigenschaft annormal.inherit: Übernimmt den Lückenwert des übergeordneten Elements.unset: Entfernt den Stromgapaus dem Element.
Prozentsätze der Lückeneigenschaften
Wenn die Größe eines Containers in der Lückendimension festgelegt ist, werden gapProzentsätze gegen die Größe des Inhaltsfelds des Containers in beliebigen Layouttypen aufgelöst.
Mit anderen Worten, wenn der Browser die Größe des Containers kennt, kann er den Prozentwert des Containers berechnen gap. Wenn beispielsweise die Höhe des Containers 100 Pixel gapbeträgt und 10% festgelegt ist, weiß der Browser, dass 10% von 100 Pixel 10 Pixel sind.
Aber wenn der Browser die Größe nicht kennt, wird er sich fragen: "10% von was?" In diesen Fällen gapverhält es sich je nach Layouttyp unterschiedlich.
In einem Rasterlayout werden Prozentsätze gegen Null aufgelöst, um die Beiträge zur intrinsischen Größe zu bestimmen. Sie werden jedoch gegen das Inhaltsfeld des Elements aufgelöst, wenn der Inhalt des Felds angeordnet wird. Dies bedeutet, dass zwischen den Elementen Platz bleibt, der Platz jedoch keinen Einfluss auf die Größe des Containers hat.
In dieser Demo ist die Höhe des Containers nicht eindeutig. Sehen Sie, was passiert, wenn Sie die gapGröße erhöhen . gapStellen Sie dann die Einheiten in Pixel ein und versuchen Sie es erneut:
In einem Flex-Layout werden Prozentsätze in allen Fällen gegen Null aufgelöst. Dies bedeutet, dass Lücken nicht entstehen, wenn die Größe des Containers dem Browser nicht bekannt ist:
Verwenden der Funktion calc () mit Lücke
Sie können die calc()Funktion verwenden, um die Größe des zu spezifizieren, gapaber zum Zeitpunkt dieses Schreibens wird dies unter Safari und iOS nicht unterstützt .
.flex-layout ( display: flex; gap: calc(5vh + 5px) calc(5vw + 5px); )
.grid-layout ( display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5vmin + 5px); )Beispiele
Die gapEigenschaft ist für die Verwendung in Raster-, Flex- und mehrspaltigen Layouts konzipiert. Schauen wir uns einige Beispiele an.
Gitterstruktur
In der folgenden Demo sehen Sie, wie Sie gapdie Eigenschaften row-gapund column-gapfür einen Rastercontainer angeben und die Rinnen zwischen Rasterzeilen bzw. Rasterspalten definieren:
Flex Layout
Das Anwenden einer Lücke auf die Hauptachse eines Flex-Containers zeigt den Abstand zwischen Flex-Elementen in einer einzelnen Zeile des Flex-Layouts an.
Hier column-gapwird in einer Zeilenrichtung verwendet:
Hier row-gapwird in Spaltenrichtung verwendet:
Das Anwenden gapauf die Querachse eines Flex-Containers zeigt den Abstand zwischen den Flex-Linien des Flex-Layouts an.
Hier ist row-gapin einer Reihe Richtung:
Hier ist column-gapin Spaltenrichtung:
Mehrspaltiges Layout
column-gapwird in mehrspaltigen Layouts angezeigt, um Lücken zwischen Spaltenfeldern zu erstellen. Beachten Sie jedoch, dass dies row-gapkeine Auswirkungen hat, da wir nur in Spalten arbeiten. gapkann in diesem Zusammenhang weiterhin verwendet werden, es wird jedoch nur das column-gapangewendet.
Wie Sie in der nächsten Demo sehen können, gaptrennt die Eigenschaft , obwohl sie den Wert 2rem hat, Elemente nur horizontal anstatt in beide Richtungen, da wir in Spalten arbeiten:
Je mehr du weisst…
Es gibt ein paar bemerkenswerte Dinge bei der Arbeit mit der gapImmobilie.
Dies ist ein guter Weg, um unerwünschte Abstände zu vermeiden
Haben Sie jemals Ränder verwendet, um Abstände zwischen Elementen zu erstellen? Wenn wir nicht aufpassen, können wir vor und nach der Gruppe von Elementen einen zusätzlichen Abstand haben.
Um dies zu lösen, müssen normalerweise negative Ränder hinzugefügt oder auf Pseudo-Selektoren zurückgegriffen werden, um Ränder von bestimmten Elementen zu entfernen. Das Schöne an gapmoderneren Layoutmethoden ist jedoch, dass zwischen den Elementen nur Platz ist. Die zusätzliche Kruft am Anfang und am Ende ist nie ein Problem!
Aber, hey, wenn Sie während der Verwendung Platz um die Gegenstände haben möchten gap, stellen Sie paddingden Behälter wie folgt um:
.container ( display: flex; gap: 1rem; padding: 1rem; )Die Dachrinnengröße entspricht nicht immer dem Spaltwert
Die gapEigenschaft ist nicht das einzige, was Platz zwischen Elementen setzen kann. Ränder, Polster justify-contentund align-contentkönnen auch die Größe der Rinne erhöhen und den tatsächlichen gapWert beeinflussen.
Im folgenden Beispiel setzen wir ein 1em, gapaber wie Sie sehen können, gibt es viel mehr Platz zwischen den Elementen, was durch die Verwendung verteilter Ausrichtungen wie justify-contentund verursacht wird align-content:
Browser-Unterstützung
Feature-Abfragen sind normalerweise eine gute Möglichkeit, um zu überprüfen, ob ein Browser eine bestimmte Eigenschaft unterstützt. In diesem Fall erhalten gapSie jedoch möglicherweise ein falsches Positiv , wenn Sie in flexbox nach der Eigenschaft suchen, da eine Feature-Abfrage nicht zwischen Layout-Modi unterscheidet. Mit anderen Worten, es wird möglicherweise in einem Flex-Layout unterstützt, was zu einem positiven Ergebnis führt. Es wird jedoch nicht unterstützt, wenn es in einem Rasterlayout verwendet wird.
Gitterstruktur
| IE | Kante | Feuerfuchs | Chrom | Safari | Oper |
|---|---|---|---|---|---|
| Nein | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Android Browser | Chrome für Android | Firefox für Android |
|---|---|---|---|---|
| 12+ | Nein | 81+ | 84+ | 68+ |
Rasterlayout mit calc () -Werten
| IE | Kante | Feuerfuchs | Chrom | Safari | Oper |
|---|---|---|---|---|---|
| Nein | 84+ | 79+ | 84+ | Nein | 69+ |
| iOS Safari | Opera Mobile | Android Browser | Chrome für Android | Firefox für Android |
|---|---|---|---|---|
| Nein | Nein | 81+ | 84+ | 68+ |
Rasterlayout mit Prozentwert
| IE | Kante | Feuerfuchs | Chrom | Safari | Oper |
|---|---|---|---|---|---|
| Nein | 84+ | 79+ | 84+ | Nein | 69+ |
| iOS Safari | Opera Mobile | Android Browser | Chrome für Android | Firefox für Android |
|---|---|---|---|---|
| Nein | Nein | 81+ | 84+ | 68+ |
Flex Layout
Die Spezifikation für die Verwendung gapmit Flexbox befindet sich derzeit im Status "Arbeitsentwurf".
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 84 | 63 | Nein | 84 | TP |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Nein | Nein |
Mehrspaltiges Layout
| IE | Kante | Feuerfuchs | Chrom | Safari | Oper |
|---|---|---|---|---|---|
| Nein | 84+ | 79+ | 84+ | Nein | 69+ |
| iOS Safari | Opera Mobile | Android Browser | Chrome für Android | Firefox für Android |
|---|---|---|---|---|
| Nein | Nein | 81+ | 84+ | 68+ |
Mehr Informationen
- CSS Box Alignment Module Level 3
- Chrom landet Flexbox-Lücke (Ticket # 761904)
- WebKit CSS-Funktionsstatus
verbunden
- Gitterstruktur
- Flexbox-Layout
- Mehrspaltiges Layout