09. CSS Grid

CSS Grid ir divdimensiju izkārtojuma sistēma, kas ļauj kontrolēt gan rindas, gan kolonnas vienlaicīgi. Tas ir ideāls sarežģītākiem lapu izkārtojumiem.

Grid pamati

Lai aktivizētu grid, vecākelementam pievieno display: grid un definē kolonu struktūru:

.konteiners {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 vienādas kolonnas */
gap: 20px;
}

fr (fraction) ir īpaša mērvienība, kas sadala pieejamo vietu proporcionāli.

Kolonnu definēšana

/* 3 vienādas kolonnas */
grid-template-columns: 1fr 1fr 1fr;

/* Tas pats, saīsināti */
grid-template-columns: repeat(3, 1fr);

/* Fiksēta sānjosla + elastīgais saturs */
grid-template-columns: 250px 1fr;

/* Dažādi izmēri */
grid-template-columns: 200px 1fr 300px;

Rindu definēšana

grid-template-rows: 80px 1fr 60px; /* galvene, saturs, kājene */

Automātisks kolonnu skaits (responsīvs)

Ar auto-fit un minmax() var izveidot responsīvu režģi bez media query:

.konteiners {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}

Šis piemērs izveido tik daudz kolonnu, cik ietilpst, ar minimālo platumu 280px.

Elementa izvietošana

Grid elementi var aizņemt vairākas kolonnas vai rindas:

.plats-elements {
grid-column: span 2; /* aizņem 2 kolonnas */
}

.garš-elements {
grid-row: span 3; /* aizņem 3 rindas */
}

/* Precīza vieta */
.elements {
grid-column: 1 / 3; /* no 1. līdz 3. kolonnas līnijai */
grid-row: 2 / 4; /* no 2. līdz 4. rindas līnijai */
}

Nosauktie apgabali (grid-template-areas)

Vizuāli intuitīvs veids, kā definēt lapas izkārtojumu:

.lapa {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"galvene galvene"
"sanjosla saturs"
"kajene kajene";
min-height: 100vh;
}

.galvene { grid-area: galvene; }
.sanjosla { grid-area: sanjosla; }
.saturs { grid-area: saturs; }
.kajene { grid-area: kajene; }

Līdzinājums

/* Satura līdzinājums šūnā */
justify-items: center; /* horizontāli */
align-items: center; /* vertikāli */
place-items: center; /* abi vienlaicīgi */

/* Visa režģa līdzinājums konteinerā */
justify-content: center;
align-content: center;

Flexbox vai Grid?

Abus var kombinēt — grid lapas kopējam izkārtojumam, flexbox atsevišķu komponentu iekšienei.