Podawanie wartości w procentach powoduje wyjście poza kontener
Wartości
gap (grid-gap)
row-gap (grid-row-gap)
column-gap (grid-column-gap)
Kod HTML
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
Kod CSS
.grid-container {
background: #fff;
border: 1px solid #bbb;
height: 160px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Zobrazowanie
grid-gap: 1 wartość
.grid-container {
gap: 10px;
}
grid-gap: 2 wartości
.grid-container {
gap: 5px 20px;
}
grid-row-gap
.grid-container {
row-gap: 20px;
}
grid-column-gap
.grid-container {
column-gap: 20px;
}
Stylowe kategorie