CSS Grid Introducere. Gapuri Grid. Proprietăți: grid-column-gap, grid-row-gap, grid-gap. Proprietatea grid-column-gap. Proprietatea grid-row-gap. Proprietatea grid-gap.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Spațiile dintre fiecare coloană/rând (column/row) se numesc gaps.
Puteți ajusta dimensiunea gapului folosind una dintre următoarele proprietăți:
- grid-column-gap
- grid-row-gap
- grid-gap
Exemplu:
Proprietatea grid-column-gap stabilește diferența dintre coloane:
.grid-container {
display: grid;
grid-column-gap: 50px;
}
Exemplu:
Proprietatea grid-row-gap stabilește diferența dintre rânduri:
.grid-container {
display: grid;
grid-row-gap: 50px;
}
Exemplu:
Proprietatea grid-gap este o proprietate shorthand pentru proprietățile grid-column-gap și grid-row-gap:
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
Exemplu:
Proprietatea grid-gap poate fi, de asemenea, folosită pentru a seta atât row gap cât și column gap într-o singură valoare:
.grid-container {
display: grid;
grid-gap: 50px;
}