gap
Ustawia odstępy między elementami w kontenerze flex, grid i wielokolumnowym.
- Wartość domyślna
normal- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- kontenery flex, grid i wielokolumnowe
- JavaScript
element.style.gap = "12px"
Przykład
#.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}<div class="grid stage">
<div class="box">1</div><div class="box">2</div><div class="box">3</div>
<div class="box">4</div><div class="box">5</div><div class="box">6</div>
</div>Definicja i zastosowanie
#Właściwość gap dodaje odstęp tylko między elementami, nigdy przy krawędziach kontenera. To skrót dla row-gap (odstęp między wierszami) i column-gap (między kolumnami). Jedna wartość ustawia oba, dwie osobno wiersze i kolumny.
Zanim gap zadziałał we Flexboxie, odstępy robiło się marginesami i trzeba było usuwać margines ostatniego elementu. Dziś jedna linijka załatwia sprawę, także przy zawijaniu do kilku linii.
Wartość może być długością albo procentem. Odstępy nie przyjmują koloru, do linii oddzielających służą obramowania elementów albo tło kontenera.
Składnia
#gap: <row-gap> <column-gap>?;Wartości
#Wartości w praktyce
#0
.demo { gap: 0; }12px
.demo { gap: 12px; }24px 6px
.demo { gap: 24px 6px; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Zamiast marginesów na elementach listy ustaw
gapna kontenerze. Nie musisz pamiętać o pierwszym i ostatnim elemencie. - Odstęp od krawędzi kontenera ustawisz przez
paddingkontenera,gapgo nie dodaje.
Powiązane hasła
#- row-gapUstawia odstęp między wierszami w kontenerze flex lub grid.
- column-gapUstawia odstęp między kolumnami w kontenerze flex, grid lub wielokolumnowym.
- flex-wrapPozwala elementom flex zawijać się do kolejnych linii, gdy brakuje miejsca.
- grid-template-columnsDefiniuje kolumny siatki: ich liczbę i szerokości.
Widzisz błąd albo brakuje przykładu? Napisz do nas.