Rács-sablon-oszlopok / rács-sablon-sorok - CSS-trükkök

A grid-template-rowsés grid-template-columnstulajdonságok az elsődleges CSS tulajdonságok a rács elrendezésének létrehozásához, ha az elem rács kontextus ( display: grid;).

Vannak -ms-grid-columnsés -ms-grid-rows, amelyek ennek a régi IE verziója. Érdemes fontolóra venni az automatikus javítást, hogy felhívja őket, vagy sem. Volt egy furcsa időszak is, ahol voltak grid-definition-columnsés grid-definition-rows, de ez már nem dolog.

Íme egy példa a Microsoft dokumentációjából:

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

Ez meghatározza a rácsok / oszlopok számát és méretét.

Ez a két tulajdonság támogatja az értékek szóközökkel elválasztott listáját. Minden érték egy új oszlopot / sort határoz meg egy dimenzió beállításával. A 4 értékből álló lista 4 oszlopot / sort eredményez. Egyetlen érték egyetlen oszlopot / sort hoz létre.

Elfogadott értékek közé hossza (mint például px, vagy em), százalékok, frakciókat ( frlásd alább), auto(vagy fit-content), min-content, max-content, és minmax(), vagy a repeat()függvény.

A fenti kód példában ez azt jelenti:

1. oszlop ( automatikus kulcsszó): Az oszlop illeszkedik az oszlop tartalmához.
2. oszlop („100px”): Az oszlop 100 pixel széles.
3. oszlop („1fr”): Az oszlop a maradék tér egy frakcióegységét foglalja el.
4. oszlop („2fr”): Az oszlop a maradék tér két frakcióegységét foglalja el.

1. sor („50px”): A sor 50 pixel magas.
2. sor („5em”): A sor 5 em magas.
3. sor ( min-tartalmi kulcsszó): A sor olyan kicsi, amennyire a tartalom engedi.
4. sor ( automatikus kulcsszó): A sor a sor tartalmához van illesztve.

ismétlés()

A repeat()funkciót kifejezetten ehhez a modulhoz tervezték. Ez lehetővé teszi, hogy X-szer ismétlődő mintát definiáljon. Tetszik repeat(6, 1fr);. Tegyük fel, hogy 12 egyenlő szélességű oszlopot szeretne 1% távolságra elhelyezni egymástól; meghatározhatnád 1fr repeat(11, 1% 1fr). Ugyanaz, mint 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

A fr egység

Az fregység használható grid-rowsés grid-columnsértékek. A „rendelkezésre álló hely töredékét” jelenti. Gondoljon rá a rendelkezésre álló hely százalékos arányára, amikor levette a rögzített méretű és tartalomalapú oszlopokat / sorokat. Ahogy a specifikáció mondja:

A törtrész eloszlása akkor következik be, ha minden „hosszúság” vagy tartalom alapú sor- és oszlopméret eléri a maximumot.

Összefüggő

A CSS rács minden szempontból a legjobb forrása a CSS Grid teljes útmutatója.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.