Grid-template-column / grid-template-rows - CSS-triki

Anonim

grid-template-rowsUn grid-template-columnsīpašības ir galvenais CSS īpašības nosaka režģa izkārtojumu, kad elements ir režģis konteksts ( display: grid;).

Ir arī -ms-grid-columnsun -ms-grid-rows, kas ir vecā IE versija. Varat apsvērt automātiskās labošanas iespēju, lai saņemtu zvanu vai nē. Bija arī dīvains periods, kur viņi bija grid-definition-columnsun grid-definition-rows, bet tā vairs nav lieta.

Lūk, piemērs, kas iegūts no Microsoft dokumentācijas:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

Tas nosaka rindu / kolonnu skaitu režģī, kā arī to dimensiju.

Šīs divas īpašības atbalsta vērtību atstarpi atdalītu sarakstu. Katra vērtība noteiks jaunu kolonnu / rindu, iestatot dimensiju. 4 vērtību saraksts radīs 4 kolonnas / rindas. Viena vērtība radīs vienu kolonnu / rindu.

Pieņemtie vērtības ir garums (piemēram, pxvai em), procentos, frakcijas ( frskatīt turpmāk), auto(vai fit-content) min-content, max-contentun minmax(), vai repeat()funkcija.

Iepriekš minētajā kodu piemērā tas nozīmē:

  • 1. kolonna ( automātiskais atslēgvārds): kolonna ir piemērota kolonnas saturam.
  • 2. kolonna (“100 pikseļi”): kolonnas platums ir 100 pikseļi.
  • 3. kolonna (“1fr”): kolonna aizņem vienu atlikušās vietas frakcijas vienību.
  • 4. kolonna (“2fr”): kolonna aizņem divas atlikušās vietas frakcijas vienības.
  • 1. rinda (“50px”): rindas garums ir 50 pikseļi.
  • 2. rinda (“5em”): rinda ir 5 ems gara.
  • 3. rinda ( min. Satura atslēgvārds): rinda ir tik maza, cik saturam tas ļaus būt.
  • 4. rinda ( automātiskais atslēgvārds): rinda ir piemērota rindas saturam.

atkārtot ()

repeat()Funkcija ir īpaši paredzēti šajā modulī. Tas ļauj noteikt modeli, kas atkārtots X reizes. Patīk repeat(6, 1fr);. Pieņemsim, ka vēlaties veikt 12 vienāda platuma kolonnas, kas izvietotas viena no otras ar 1% starpību; jūs varētu definēt 1fr repeat(11, 1% 1fr). Tas ir tas pats, kas 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Fr vienība

frVienība var izmantot grid-rowsun grid-columnsvērtības. Tas nozīmē “pieejamās vietas daļu”. Padomājiet par to kā par pieejamās vietas procentiem, kad esat noņemis fiksēta lieluma un uz saturu balstītas kolonnas / rindas. Kā saka spec:

Daļējās telpas sadalījums notiek pēc tam, kad visi “garuma” vai uz saturu balstītie rindu un kolonnu izmēri ir sasnieguši maksimumu.

Saistīts

Mūsu labākais resurss visām CSS režģa lietām ir pilnīgs CSS režģa ceļvedis.

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
57 52 11 * 16 10.1

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 85 81. 10.3