Grid-template-sarakkeet / grid-template-rivit - CSS-temppuja

grid-template-rowsJa grid-template-columnsominaisuudet ovat ensisijainen CSS-ominaisuuksia perustamiseksi kantaverkkoon, kun elementti on ruudukko konteksti ( display: grid;).

Siellä on myös -ms-grid-columnsja -ms-grid-rows, jotka ovat tämän vanha IE-versio. Voit halutessasi harkita automaattista korjausta saadaksesi puhelusi tai ei. Oli myös outo jakso, jossa he olivat grid-definition-columnsja grid-definition-rows, mutta se ei ole enää asia.

Tässä on esimerkki, joka on johdettu Microsoftin dokumentaatiosta:

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

Tämä määrittelee ruudukon rivien / sarakkeiden määrän sekä niiden ulottuvuuden.

Nämä kaksi ominaisuutta tukevat luetteloa arvoista, jotka on erotettu välilyönneillä. Kukin arvo määrittää uuden sarakkeen / rivin asettamalla ulottuvuuden. Neljän arvon luettelo johtaa 4 sarakkeeseen / riviin. Yksi arvo tuottaa yhden sarakkeen / rivin.

Hyväksytyt arvot ovat pituus (kuten pxtai em), prosentit, fraktiot ( fr; katso jäljempänä), auto(tai fit-content), min-content, max-content, ja minmax(), tai repeat()toiminto.

Yllä olevassa koodiesimerkissä se tarkoittaa:

Sarake 1 ( automaattinen avainsana): Sarake sovitetaan sarakkeen sisältöön.
Sarake 2 (“100px”): Sarake on 100 pikseliä leveä.
Sarake 3 (“1fr”): Sarake vie yhden murtoyksikön jäljellä olevasta tilasta.
Sarake 4 (“2fr”): Sarake vie kaksi murto-osaa jäljellä olevasta tilasta.

Rivi 1 (“50px”): Rivi on 50 pikseliä pitkä.
Rivi 2 (“5em”): Rivi on 5 ems pitkä.
Rivi 3 ( sisällön minimi avainsana): Rivi on yhtä pieni kuin sisältö sen antaa.
Rivi 4 ( automaattinen avainsana): Rivi on asennettu rivin sisältöön.

toistaa()

repeat()Toiminto on suunniteltu erityisesti tätä moduulia. Sen avulla voit määrittää mallin, joka toistetaan X kertaa. Kuten repeat(6, 1fr);. Oletetaan, että haluat tehdä 12 yhtä leveää saraketta, jotka ovat toisistaan 1% marginaalilla; voisit määritellä 1fr repeat(11, 1% 1fr). Se on sama kuin 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Fr yksikkö

frYksikköä voidaan käyttää grid-rowsja grid-columnsarvoja. Se tarkoittaa "murto-osaa käytettävissä olevasta tilasta". Ajattele sitä käytettävissä olevan tilan prosentteina, kun olet poistanut kiinteäkokoiset ja sisältöpohjaiset sarakkeet / rivit. Kuten spec sanoo:

Murtoluvun jakauma tapahtuu, kun kaikki 'pituus' tai sisältöpohjaiset rivi- ja sarakekoot ovat saavuttaneet maksiminsa.

Liittyvät

Paras resurssimme CSS-ruudukkoon on täydellinen opas CSS-ruudukkoon.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.