Kas yra „Grid Property“?

Tinklelio ypatybė yra sutrumpinta tinklelio-šablono-eilučių, tinklelio-šablono – stulpelių, tinklelio – šablono – sričių, tinklelio – automatinių eilučių, tinklelio – automatinio stulpelio, tinklelio – automatinio srauto, tinklelio – stulpelio – tarpo, ypatybė. , ir tinklelio eilutės tarpų savybės.

Tinklelio struktūra

Tinklelio ypatybė leidžia elementus rodyti kaip matricą ⊞

 
 
 
 
 
 
 
 

Css

#container {
 ekranas: tinklelis;
 }

pavyzdyje #konteineris rodomas kaip tinklelis, o jo antrinis elementas bus rodomas kaip tinklelio langeliai ar elementai

Naršyklių suderinamumas

Tai didžiulis jaudulys, kad „IE“, „Edge“ ir „Firefox“ palaiko CSS tinklelio ypatybes . Dažniausiai visos naršyklės kūrėjų įrankiuose turi gražų tinklelio rodinio vartotojo sąsają.

Tinklelio linijos

Tinklelio linijos yra horizontalios ir vertikalios linijos, jos naudojamos padėties nustatymui. Vietos nustatymo indeksas gali būti sveikasis skaičius (tiek neigiami, tiek teigiami sveikieji skaičiai).

Ypatybės → tinklelio stulpelio pradžia, tinklelio stulpelio pabaiga, tinklelio eilutės pabaiga, tinklelio eilutės pabaiga.

Imties kodas:

#grid> div: n-tas vaikas (2) {
 tinklelio stulpelio pradžia: 2;
 tinklelio stulpelio galas: 3;
 tinklelio eilės pradžia: 2;
 tinklelio eilutės pabaiga: 3;
}

2 elementas prasidės nuo antrosios vertikalios linijos 2 horizontalioje linijoje, o elementas baigsis ties 3 vertikalia linija ir 3 vertikalia linija.

Tinklelio linija

Tinklelio langelis

Tinklelio langelis yra tarpas tarp dviejų gretimų vertikalių tinklelio linijų ir dviejų gretimų horizontalių tinklelio linijų.

Tinklelio ląstelė

Tinklelio takeliai

Tinklelio trasa yra tarpas tarp dviejų gretimų tinklelio linijų. T. y. eilutė, stulpeliai.

Tinklelio takelis

Tinklelio sritis ir tinklelio spraga

Tinklelio sritis yra vienos ar kelių langelių grupė.

Tinklelio tarpas yra tarpas tarp eilučių ir stulpelių. Tai sutrumpintas tinklelio - eilutės ir stulpelio - tarpas.

Tinklelio eilutė ir tinklelis stulpelis

tinklelis-eilutė yra sutrumpintas tinklelio eilutės-pradžios ir tinklelio-eilutės pabaigos ypatybė.

tinklelio stulpelis yra sutrumpintas tinklelio stulpelio pradžios ir stulpelio pabaigos ypatybė

Tinklelio eilutė

tinklelis-eilutė-pradžia → nurodo tinklelio elemento pradžios vietą eilutėje

Pvz., Grindų eilės pradžia: 2 → Elementas prasidės nuo antros vertikalios linijos

tinklelio eilutės pabaiga → nurodo tinklelio elemento pabaigos vietą eilutėje

Pvz .: tinklelio eilutės pabaiga: 3 → Elementas baigsis antroje vertikalioje linijoje

Tinklelis-automatinis srautas

Tai kontroliuoja, kaip veikia automatinio išdėstymo algoritmas. Pagal numatytuosius nustatymus vertė yra eilutė (elementai dedami į eilutes)

tinklelis-automatinis srautas: eilutė;
tinklelis-automatinis srautas: stulpelis;
Tinklelio automatinio srauto stulpelis ir tinklelio automatinio srauto eilutė

tinklelis-automatinis srautas: eilutė tanki → Naudojamas „tankus“ pakavimo algoritmas. Užpildykite laisvą vietą tinklelyje eilėmis.

automatinis tinklelio srautas: tankus stulpelis → naudoja „tankaus“ ​​pakavimo algoritmą. Užpildykite laisvą vietą tinklelyje stulpelių pagrindu

Aiškus tinklelis ir Numanomas tinklelis

Aiškus tinklelis yra tinklelis, kurį vartotojas sukuria naudodamas stulpelius tinklelio-šablono-eilutės, tinklelio-šablono-stulpelius

tinklelio, šablono, stulpeliai: pakartokite (3, 100 pikselių);
tinklelio, šablono, eilutės: 100 pikselių 100 pikselių;

Numatytą tinklelį sukuria naršyklė. Numanomo tinklelio dydį galima keisti naudojant tinklelio automatinius stulpelius ir tinklelio automatinių eilių ypatybę.

tinklelio, šablono, stulpeliai: pakartokite (3, 100 pikselių);
tinklelio automatinės eilutės: 100 pikselių;

Tinklelio tvarka:

Elementą galime užsisakyti pagal šablono srities ypatybes.

mes galime pakeisti šablono sritį medijos užklausoje ir parodyti naują tinklelio struktūrą.

Norėdami sužinoti daugiau, patikrinkite „codepen“.

Tinkleliui dažniausiai visi naudojame „bootstrap“ tinklelio sistemą. Bootstrap gali pakeisti kiekvienos klasės pavadinimą kiekvienoje versijoje (bet ne taip kaip kampinis ), todėl turime atsiminti, kuri versija turi kurios klasės pavadinimą .

Naudodamiesi CSS tinklelio ypatybe, mes GALIME (net IE ) lengvai parodyti elementus tinklelio rodinyje.

Labai ačiū už skaitymą! Jei jums patiko, palaikykite, spausdami ir pasidalindami įrašu. Maloniai parašykite komentarą žemiau.