Grid-malli-veerud / ruudustiku-malli-read - CSS-trikid

grid-template-rowsJa grid-template-columnsomadused on peamine CSS omadused loomise võrgu skeem, kui element on grid kontekstis ( display: grid;).

Sellest on olemas ka -ms-grid-columnsja -ms-grid-rows, mis on selle vana IE versioon. Võite kaaluda Autoprefiximist, et need teie kõne kätte saada või mitte. Oli ka üks imelik periood, kus nad olid grid-definition-columnsja grid-definition-rows, aga see pole enam asi.

Siin on näide Microsofti dokumentatsioonist:

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

See määrab ruudustiku ridade / veergude arvu ja nende mõõtmed.

Need kaks omadust toetavad tühikutega eraldatud väärtuste loendit. Iga väärtus määrab uue veeru / rea, määrates dimensiooni. 4 väärtuse loendi tulemuseks on 4 veergu / rida. Üks väärtus annab ühe veeru / rea.

Aktsepteeritud väärtuste hulka pikkus (nagu pxvõi em), protsendid fraktsioonid ( frvt allpool), auto(või fit-content), min-content, max-contentja minmax(), või repeat()funktsiooni.

Ülalolevas koodinäites tähendab see:

1. veerg ( automaatne märksõna): veerg sobib veeru sisuga.
2. veerg (“100 pikslit”): veeru laius on 100 pikslit.
Veerg 3 (“1fr”): veerg võtab järelejäänud ruumist ühe murdühiku.
Veerg 4 (“2fr”): veerg võtab järelejäänud ruumist kaks murdühikut.

1. rida (50 pikslit): rida on 50 pikslit kõrge.
2. rida (“5em”): rida on 5 emsi pikk.
3. rida ( minimaalse sisuga märksõna): rida on nii väike, kui sisu seda lubab.
4. rida ( automaatne märksõna): rida sobib rea sisuga.

kordus ()

repeat()Funktsioon on spetsiaalselt selle mooduli. See võimaldab teil määratleda mustrit, mida korratakse X korda. Meeldib repeat(6, 1fr);. Oletame, et soovite teha 12 võrdse laiusega veergu, mis asuvad üksteisest 1% marginaaliga; sa võiksid määratleda 1fr repeat(11, 1% 1fr). See on sama mis 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Fr üksus

frUnit saab kasutada grid-rowsja grid-columnsväärtusi. See tähistab "osa olemasolevast ruumist". Mõelge sellele kui vaba ruumi protsentidest, kui olete fikseeritud suurusega ja sisupõhised veerud / read maha võtnud. Nagu spetsifikatsioon ütleb:

Murdruumi jaotumine toimub pärast seda, kui kõik 'pikkus' või sisupõhised rea ja veeru suurused on saavutanud maksimumi.

Seotud

Meie parim ressurss CSS-ruudustiku jaoks on meie täielik juhend CSS-ruudustikuks.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.