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