Właściwość gap w CSS to skrót od row-gapi column-gap, określający rozmiar rynny, czyli przestrzeń między wierszami i kolumnami w układach grid, flex i multi-column.
/* 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; )
Użyj suwaka w poniższym demo, aby zobaczyć gapwłaściwość w akcji:
Składnia
gap akceptuje jedną lub dwie wartości:
- Pojedyncza wartość ustawia obie
row-gapicolumn-gaptę samą wartość. - Gdy używane są dwie wartości, pierwsza ustawia,
row-gapa druga ustawiacolumn-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%; */ )Specyfikacja modułu CSS Grid Layout Module definiowała przestrzeń między ścieżkami siatki za pomocą grid-gapwłaściwości. gapma na celu zastąpienie go, aby luki można było definiować w wielu metodach układu CSS, takich jak flexbox, ale grid-gapnadal musi być używane w przypadkach, gdy przeglądarka mogła zaimplementować, grid-gapale jeszcze nie zaczęła obsługiwać nowszej gapwłaściwości.
Wartości
gap akceptuje następujące wartości:
normal: (Domyślnie) Przeglądarka określi używaną wartość 1em dla układu wielokolumnowego i 0px dla wszystkich innych kontekstów układu (tj. Grid i flex).: Każda ważna i nieujemna długość CSS, takie jakpx,em,remi%, między innymi.: Wielkość luki jako nieujemna wartość procentowa w stosunku do wymiaru elementu. (Szczegółowe informacje znajdują się poniżej).initial: Stosuje domyślne ustawienie właściwości, czylinormal.inherit: Przyjmuje wartość przerwy rodzica.unset: Usuwa prądgapz elementu.
Wartości procentowe we właściwościach szczeliny
Gdy rozmiar kontenera w wymiarze przerwy jest określony, gaprozwiązuje wartości procentowe w stosunku do rozmiaru pola zawartości kontenera w dowolnym typie układu.
Innymi słowy, gdy przeglądarka zna rozmiar kontenera, może obliczyć procentową wartość pliku gap. Na przykład, jeśli wysokość kontenera wynosi 100 pikseli, a wartość gapjest ustawiona na 10%, przeglądarka wie, że 10% ze 100 pikseli to 10 pikseli.
Ale kiedy przeglądarka nie zna rozmiaru, będzie się zastanawiać: „10% czego?” W takich przypadkach gapzachowuje się inaczej w zależności od typu układu.
W układzie siatki wartości procentowe są rozwiązywane względem zera w celu określenia wkładu rozmiaru wewnętrznego, ale są rozstrzygane w odniesieniu do pola zawartości elementu podczas układania zawartości pola, co oznacza, że umieszcza przestrzeń między elementami, ale przestrzeń nie wpływa na rozmiar kontenera.
W tym demo wysokość kontenera nie jest określona. Zobacz, co się stanie, gdy zwiększysz gaprozmiar. Następnie ustaw gapw pikselach jednostki i spróbuj ponownie:
W układzie elastycznym wartości procentowe są we wszystkich przypadkach równe zeru, co oznacza, że luki nie będą miały zastosowania, gdy rozmiar kontenera nie jest znany przeglądarce:
Korzystanie z funkcji calc () z przerwą
Możesz użyć calc()funkcji, aby określić rozmiar gappliku, ale w chwili pisania tego tekstu nie jest on obsługiwany w Safari i iOS.
.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); )Przykłady
gapNieruchomość przeznaczona jest do stosowania w sieci, flex i multi-kolumnowych układów. Zobaczmy kilka przykładów.
Układ siatki
W poniższym demo można zobaczyć, gapjest używany do określenia row-gapi column-gapwłaściwości na pojemniku siatki, zdefiniowanie rynny między rzędami i kolumnami siatki siatki odpowiednio:
Układ elastyczny
Zastosowanie odstępu do głównej osi pojemnika elastycznego wskazuje odstępy między elementami elastycznymi w jednej linii układu elastycznego.
Tutaj jest column-gapużywany w kierunku wierszowym:
Tutaj jest row-gapużywany w kierunku kolumny:
Zastosowanie gapdo osi poprzecznej pojemnika elastycznego wskazuje odstępy między liniami elastycznymi układu elastycznego.
Oto row-gapw kierunku wierszowym:
Oto column-gapw kierunku kolumny:
Układ wielokolumnowy
column-gappojawia się w układach wielokolumnowych, aby utworzyć przerwy między polami kolumn, ale pamiętaj, że row-gapnie ma to żadnego wpływu, ponieważ pracujemy tylko w kolumnach. gapnadal może być używany w tym kontekście, ale column-gapzostanie zastosowany tylko plik will.
Jak widać w następnym demo, chociaż gapwłaściwość ma wartość 2rem, oddziela elementy tylko w poziomie, a nie w obu kierunkach, ponieważ pracujemy w kolumnach:
Im więcej wiesz…
Jest kilka rzeczy, na które warto zwrócić uwagę podczas pracy z gapnieruchomością.
To dobry sposób na zapobieganie niechcianym odstępom
Czy kiedykolwiek używałeś marginesów do tworzenia odstępów między elementami? Jeśli nie będziemy ostrożni, możemy skończyć z dodatkowymi odstępami przed i po grupie elementów.
Rozwiązanie tego zwykle wymaga dodania ujemnych marginesów lub uciekania się do pseudoselektorów w celu usunięcia marży z określonych pozycji. Ale fajną rzeczą gapw używaniu w bardziej nowoczesnych metodach projektowania jest to, że masz tylko przestrzeń między elementami. Dodatkowy cruft na początku i na końcu nigdy nie jest problemem!
Ale hej, jeśli chcesz mieć miejsce wokół przedmiotów podczas używania gap, umieść paddingpojemnik w ten sposób:
.container ( display: flex; gap: 1rem; padding: 1rem; )Rozmiar rynny nie zawsze jest równy wartości przerwy
gapNieruchomość nie jest jedyną rzeczą, która może umieścić przestrzeń pomiędzy elementami. Marginesy, wypełnienia, justify-contenta align-contenttakże mogą zwiększyć rozmiar rynny i wpłynąć na rzeczywistą gapwartość.
W poniższym przykładzie ustawiamy 1em, gapale jak widać, między elementami jest znacznie więcej miejsca, co jest spowodowane użyciem rozproszonych wyrównań, takich jak justify-contenti align-content:
Wsparcie przeglądarki
Zapytania o funkcje są zwykle dobrym sposobem sprawdzenia, czy przeglądarka obsługuje określoną właściwość, ale w tym przypadku, jeśli sprawdzisz gapwłaściwość w module flexbox, możesz otrzymać fałszywie dodatni wynik, ponieważ zapytanie o funkcję nie rozróżnia trybów układu. Innymi słowy, może być obsługiwany w układzie flex, co daje wynik pozytywny, ale w rzeczywistości nie jest obsługiwany, jeśli jest używany w układzie siatki.
Układ siatki
| TO ZNACZY | Brzeg | Firefox | Chrom | Safari | Opera |
|---|---|---|---|---|---|
| Nie | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Przeglądarka Android | Chrome na Androida | Firefox dla Androida |
|---|---|---|---|---|
| 12+ | Nie | 81+ | 84+ | 68+ |
Układ siatki z wartościami calc ()
| TO ZNACZY | Brzeg | Firefox | Chrom | Safari | Opera |
|---|---|---|---|---|---|
| Nie | 84+ | 79+ | 84+ | Nie | 69+ |
| iOS Safari | Opera Mobile | Przeglądarka Android | Chrome na Androida | Firefox dla Androida |
|---|---|---|---|---|
| Nie | Nie | 81+ | 84+ | 68+ |
Układ siatki z wartością procentową
| TO ZNACZY | Brzeg | Firefox | Chrom | Safari | Opera |
|---|---|---|---|---|---|
| Nie | 84+ | 79+ | 84+ | Nie | 69+ |
| iOS Safari | Opera Mobile | Przeglądarka Android | Chrome na Androida | Firefox dla Androida |
|---|---|---|---|---|
| Nie | Nie | 81+ | 84+ | 68+ |
Układ elastyczny
Specyfikacja dotycząca korzystania gapz Flexbox jest obecnie w wersji roboczej.
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 84 | 63 | Nie | 84 | TP |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Nie | Nie |
Układ wielokolumnowy
| TO ZNACZY | Brzeg | Firefox | Chrom | Safari | Opera |
|---|---|---|---|---|---|
| Nie | 84+ | 79+ | 84+ | Nie | 69+ |
| iOS Safari | Opera Mobile | Przeglądarka Android | Chrome na Androida | Firefox dla Androida |
|---|---|---|---|---|
| Nie | Nie | 81+ | 84+ | 68+ |
Więcej informacji
- Moduł wyrównywania skrzynek CSS poziom 3
- Przerwa Flexbox w chromie (bilet nr 761904)
- Stan funkcji WebKit CSS
Związane z
- Układ siatki
- Układ Flexbox
- Układ wielokolumnowy