Grilă-șablon-coloane / grilă-șablon-rânduri - CSS-Tricks

grid-template-rowsȘi grid-template-columnsproprietăți sunt proprietăți CSS primare pentru stabilirea unui aspect grilă, odată ce elementul este un context grilă ( display: grid;).

Există și -ms-grid-columnsși -ms-grid-rows, care sunt vechea versiune IE a acestei. Poate doriți să luați în considerare Autoprefixarea pentru a primi sau nu apelul dvs. A existat și o perioadă ciudată în care au fost grid-definition-columnsși grid-definition-rows, dar asta nu mai este un lucru.

Iată un exemplu derivat din documentația Microsoft:

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

Aceasta definește numărul de rânduri / coloane din grilă, precum și dimensiunea acestora.

Aceste două proprietăți acceptă o listă de valori separate prin spații. Fiecare valoare va defini o nouă coloană / rând prin setarea unei dimensiuni. O listă de 4 valori va avea ca rezultat 4 coloane / rânduri. O singură valoare va produce o singură coloană / rând.

Valorile acceptate includ lungime (cum ar fi pxsau em), procente, fracții ( a se frvedea mai jos), auto(sau fit-content) min-content, max-contentși minmax(), sau repeat()funcția.

În exemplul de cod de mai sus, asta înseamnă:

Coloana 1 ( cuvânt cheie automat ): Coloana este adaptată conținutului din coloană.
Coloana 2 („100px”): Coloana are o lățime de 100 de pixeli.
Coloana 3 („1fr”): Coloana ocupă o unitate fracțională din spațiul rămas.
Coloana 4 („2fr”): Coloana ocupă două unități fracționale din spațiul rămas.

Rândul 1 („50px”): Rândul are o înălțime de 50 de pixeli.
Rândul 2 („5em”): Rândul are o înălțime de 5 em.
Rândul 3 ( cuvânt cheie cu conținut minim ): rândul este la fel de mic pe cât îl va lăsa conținutul.
Rândul 4 ( cuvânt cheie automat ): Rândul este adaptat conținutului din rând.

repeta()

repeat()Funcția a fost proiectat special pentru acest modul. Vă permite să definiți un model repetat de X ori. Ca repeat(6, 1fr);. Să presupunem că doriți să faceți 12 coloane cu lățime egală, distanțate între ele cu o marjă de 1%; ai putea defini 1fr repeat(11, 1% 1fr). Este la fel ca 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Unitatea fr

frUnitatea poate fi folosită pentru grid-rowsși grid-columnsvalori. Reprezintă „fracțiunea din spațiul disponibil”. Gândiți-vă la asta ca la procente pentru spațiul disponibil atunci când ați scos coloane / rânduri de dimensiuni fixe și bazate pe conținut. După cum spune specificația:

Distribuția spațiului fracționat are loc după ce toate dimensiunile de „lungime” sau de conținut pe rânduri și coloane au atins maximul lor.

Legate de

Cea mai bună resursă pentru toate lucrurile Grila CSS este Ghidul nostru complet pentru Grila CSS.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.