Tinklelis-šablonas-stulpeliai / tinklelis-šablonas-eilutės - CSS-gudrybės

grid-template-rowsIr grid-template-columnssavybės yra pirminiai CSS savybės steigimo tinklelį išdėstymą, kai elementas yra tinklelis kontekstas ( display: grid;).

Taip pat yra -ms-grid-columnsir -ms-grid-rows, kurios yra senoji IE versija. Galbūt norėsite apsvarstyti automatinio taisymo funkciją, kad gautumėte skambutį. Buvo ir keistas laikotarpis, kai jie buvo grid-definition-columnsir grid-definition-rows, bet tai jau nebe dalykas.

Štai pavyzdys, gautas iš „Microsoft“ dokumentų:

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

Tai apibrėžia eilučių / stulpelių skaičių tinklelyje ir jų matmenis.

Šios dvi savybės palaiko tarpais atskirtų verčių sąrašą. Kiekviena vertė nustatys naują stulpelį / eilutę nustatydama aspektą. 4 reikšmių sąraše bus 4 stulpeliai / eilutės. Viena vertė sukurs vieną stulpelį / eilutę.

Gyvūnus reikšmės yra ilgį (pavyzdžiui, pxarba em), procentinės dalys frakcijos ( fr; žr žemiau), auto(arba fit-content), min-content, max-content, ir minmax(), arba repeat()funkcija.

Aukščiau pateiktame kodo pavyzdyje tai reiškia:

1 stulpelis ( automatinis raktinis žodis): stulpelis pritaikytas stulpelio turiniui.
2 stulpelis („100 taškų“): stulpelio plotis yra 100 pikselių.
3 stulpelis („1fr“): stulpelis užima vieną likusios vietos dalies vienetą.
4 stulpelis („2fr“): stulpelis užima du likusios vietos dalies vienetus.

1 eilutė („50 taškų“): eilutė yra 50 taškų aukščio.
2 eilutė („5em“): eilutė yra 5 ems aukščio.
3 eilutė ( min. Turinio raktinis žodis): eilutė yra tokia maža, kiek leis turinys.
4 eilutė ( automatinis raktinis žodis): eilutė pritaikyta eilutės turiniui.

pakartoti ()

repeat()Funkcija buvo specialiai sukurta šiam moduliui. Tai leidžia apibrėžti modelį, kartojamą X kartus. Patinka repeat(6, 1fr);. Tarkime, kad norite atlikti 12 vienodo pločio stulpelių, išdėstytų vienas nuo kito 1% skirtumu; galėtum apibrėžti 1fr repeat(11, 1% 1fr). Tai tas pats kaip 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Fr vienetas

frĮrenginys gali būti naudojamas grid-rowsir grid-columnsvertybės. Tai reiškia „laisvos vietos dalį“. Laikykite tai laisvos vietos procentais, kai nuimsite fiksuoto dydžio ir turiniu pagrįstus stulpelius / eilutes. Kaip sako spec:

Dalinės erdvės pasiskirstymas įvyksta po to, kai visi „ilgio“ arba turiniu pagrįsti eilučių ir stulpelių dydžiai pasiekia maksimalų dydį.

Susijęs

Geriausias mūsų CSS tinklelio šaltinis yra išsamus CSS tinklelio vadovas.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.