Kaj je Grid Property?

Lastnost omrežja je lastnost omrežja za vrstice vrstic-predloga, omrežja-predloga-stolpci, območja-predloga mreže, mreža-samodejne vrstice, omrežja-samodejni stolpci, mreža-samodejni tok, mreža-stolpec-vrzel in lastnosti vrstic z vrstico.

Struktura mreže

Lastnost Grid omogoča prikaz elementov kot matrika mat

 
 
 
 
 
 
 
 

V css

#container {
 zaslon: mreža;
 }

na primer, #container je prikazan kot mreža, njegovi podrejeni elementi pa bodo prikazani kot celice ali elementi mreže

Združljivost brskalnika

Vznemirljivo je, da IE, Edge, Firefox podpira lastnost omrežja CSS . Večinoma je v vseh brskalnikih uporabniški vmesnik za pogled v mrežo v orodjih za razvijalce.

Lidne mreže

Lidne mreže so vodoravne in navpične črte, uporabljajo se za pozicioniranje. Indeks pozicioniranja je lahko celo število (negativna in pozitivna cela števila).

Lastnosti → mreža-stolpec-začetek, mreža-stolpec-konec, mreža-vrstica-konec, mreža-vrstica-konec.

Vzorec koda:

#grid> div: nth-otrok (2) {
 rešetka-stolpec-začetek: 2;
 mreža-stolpec-konec: 3;
 grid-row-start: 2;
 mreža-vrstica-konec: 3;
}

Element 2 se bo začel v drugi navpični črti v 2 vodoravni črti, element pa se bo končal v 3 navpični črti in 3 navpični črti.

Grid Line

Grid celica

Omrežna celica je prostor med dvema sosednjima navpičnima mrežama in dvema sosednjima vodoravnima mrežama.

Grid Cell

Grid Skladbe

Mrežni tir je prostor med dvema sosednjima mrežama. to je vrstica, stolpci.

Grid skladbo

Grid Area & Grid Gap

Območje mreže je skupina ene ali več celic.

Grid Gap je presledek med vrsticami in stolpci. To je lastnost okrajšave omrežne vrvice-vrzeli in mreže-stolpca-reže.

Grid Row & Grid stolpec

grid-row je lastnost kratkega roka za začetek grid-row in grid-row-end.

grid-column je kratka lastnost za grid-column-start in grid-column-end

Vrstica mreže

grid-row-start → določa začetni položaj elementa mreže v vrstici

npr.Grid-row-start: 2 → Element se bo začel v drugi navpični vrstici

grid-end-row → določa končni položaj elementa mreže v vrstici

npr.Grid-row-end: 3 → Element se bo končal v drugi navpični vrstici

Grid-samodejni tok

Nadzira, kako deluje algoritem samodejnega umeščanja. Privzeto je vrednost vrstica (Elementi so postavljeni v osnovo vrstice)

grid-auto-flow: vrstica;
grid-auto-flow: stolpec;
Mreža samodejnega pretoka stolpca in vrstica samodejnega pretoka mreže

samodejni pretok v mreži: gosto gosto → Uporablja se "gost" algoritem pakiranja. Zapolnite prosti prostor v mreži po vrsticah.

grid-auto-flow: stolpec gosto → Uporablja se "gost" algoritem pakiranja. Zapolnite prosti prostor v mreži na podlagi stolpcev

Izrecna mreža in implicitna mreža

Izrecna mreža je omrežje, ki ga ustvari uporabnik z uporabo grid-template-row, grid-template-stolpcev

grid-template-столje: ponovite (3, 100px);
vrstico-predloga-rešetke: 100px 100px;

Implicitno mrežo ustvari brskalnik. Velikost implicitne mreže je mogoče spremeniti z lastnostjo grid-auto-stolpcev in lastnosti grid-auto-vrstic.

grid-template-столje: ponovite (3, 100px);
samodejne vrstice: 100px;

Vrstni red mreže:

Element lahko naročimo po lastnosti območja predloge.

lahko spremenimo območje predloge v medijskih poizvedbah in prikažemo novo strukturo mreže.

preverite šifrant za več.

Za mrežo večinoma vsi uporabljamo sistem škorenjskih mrež. Bootstrap lahko spremeni ime vsakega razreda v vsaki različici (vendar ne kot kotni ), zato si moramo zapomniti, katera različica ima ime razreda .

Z uporabo lastnosti omrežja CSS lahko MI (tudi v IE ) elemente enostavno prikažemo v pogledu mreže.

Najlepša hvala za branje! Če vam je bilo všeč, podprite s ploskanjem in objavo. Prosimo, pustite komentar spodaj.