dexblog.ro
CSS Toate proprietățile CSS

grid-column și grid-row (span) în CSS

CSS Grid (Layout bidimensional) CSS3+

Stabilește poziția și întinderea unui element copil peste una sau mai multe coloane sau rânduri ale grilei.

Sintaxă CSS 
grid-column: 1 / 3;     /* începe la linia 1, se termină la linia 3 */
grid-column: span 2;    /* se întinde pe 2 coloane */
grid-column: 1 / -1;    /* se întinde pe toată lățimea grilei (de la prima la ultima linie) */
grid-row: span 3;       /* se întinde pe 3 rânduri în înălțime */

Ce face grid-column și grid-row (span)

Elementele dintr-o grilă se plasează pe baza liniilor de grilă (numerotate de la 1 la marginea din stânga până la n la marginea din dreapta).

Cu grid-column: span 2, poți face ca o imagine sau un card important (featured) să fie de două ori mai lat decât celelalte elemente din grilă. Valoarea grid-column: 1 / -1 face ca un banner să se întindă pe toată lățimea grilei, indiferent câte coloane are aceasta.

Valori uzuale

Valoare Descriere
start / end Indică linia de început și linia de sfârșit a elementului.
span n Câte celule (coloane sau rânduri) ocupă elementul.
1 / -1 Se întinde de la prima linie până la ultima linie a containerului.

Exemple

Exemplul 1: Card principal evidențiat (Featured) pe două coloane

Primul card ocupă 2 coloane, iar restul câte o coloană.

.grila-articole {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.articol-promovat {
  grid-column: span 2;
  background-color: #f8fafc;
}

Efect vizual în browser

Primul articol ocupă o lățime dublă (două coloane din trei), iar celelalte ocupă câte o treime.

Greșeli frecvente

  • Confundarea numerotării coloanelor cu numerotarea liniilor de grilă (pentru 3 coloane există 4 linii de grilă: linia 1, 2, 3 și 4).

Comenzi înrudite