Mis on võrguomand?

Ruudustiku omadus on lühike omadus ruudustik-mall-read, ruudustik-mall-veerud, ruudustik-mall-alad, ruudustik-automaatridad, ruudustik-automaatveerud, ruudustik-automaatvool, ruudustik-veerg-pilu ja ruudustiku reavahede omadused.

Võre struktuur

Võrgu omadus muudab elemendid kuvatavaks nagu maatriks ⊞

 
 
 
 
 
 
 
 

Css

#container {
 kuva: ruudustik;
 }

Näites kuvatakse #konteiner ruudustikuna ja selle alamelemendi ruudukujuliste elementide või üksustena

Brauseri ühilduvus

See on tohutult põnev, et IE, Edge, Firefox toetab CSS-i võrgu omadusi property. Enamasti on kõigil brauseritel arendaja tööriistades ilus võrguvaate kasutajaliides.

Võrejooned

Võrejooned on horisontaalsed ja vertikaalsed jooned, neid kasutatakse positsioneerimiseks. Positsioneerimisindeks võib olla täisarv (nii negatiivsed kui ka positiivsed täisarvud).

Omadused → ruudustik-veerg-algus, ruudustik-veerg-ots, ruudustik-rida-lõpp, ruudustik-rida-lõpp.

Näidiskood:

#grid> div: n-ö laps (2) {
 ruudustiku algus: 2;
 võre-veeru ots: 3;
 ruudustik-rida: 2;
 ruudustiku rea lõpp: 3;
}

Element 2 algab teisest vertikaalsest joonest 2 horisontaaljoonest ja element lõpeb 3 vertikaalse ja 3 vertikaalse joonega.

Ruudustik

Võre lahter

Võre lahter on ruum kahe külgneva vertikaalse võrejoone ja kahe külgneva horisontaalse võrejoone vahel.

Võre lahter

Võrgurajad

Võrgustikrada on ruum kahe külgneva võrejoone vahel. st rida, veerge.

Võrgurada

Võre pindala ja tühimik

Võrgustiku ala on ühe või mitme lahtri rühm.

Grid Gap on ridade ja veergude vaheline ruum. See on ruudukujulise rea ja veeru-veergu lühendatud omadus.

Veerg Rida ja ruudustik

ruutrida on lühendatud omadus ruudustiku rea algusesse ja ruudus rea lõppu.

ruudustik-veerg on lühendatud omadus ruudustik-veerg-algus ja ruut-veerg-ots

Võre rida

ruudustik-rida-algus → määrab ruudustikuelemendi alguse rea

nt.rida-rea algus: 2 → element algab teisest vertikaalsest joonest

ruudustik rea lõppu → määrab ruudustiku üksuse rea lõpppunkti

nt.võre rea lõpp: 3 → element lõpeb teisel vertikaaljoonel

Võrgu-automaatne vool

See kontrollib, kuidas automaatse paigutuse algoritm töötab. Vaikimisi on väärtus rida (üksused paigutatakse reapõhiselt)

grid-auto-flow: rida;
grid-auto-flow: veerg;
Ruudustiku automaatse voolu veerg ja ruudu automaatse voolu rida

grid-auto-flow: rida tihe → kasutab „tihedat” pakkimisalgoritmi. Täitke ruudustik ruudustikus.

ruudustikuline automaatvool: veerg tihe → kasutab tiheda pakkimisalgoritmi. Täitke ruudustikus ruudus olev vaba ruum veeru alusel

Selgesõnaline ruudustik ja kaudne ruudustik

Selgesõnaline ruudustik on ruudustik, mille kasutaja on loonud ruudustiku-malli-rea, ruudustiku-malli-veergude abil

ruudustik-mall-veerud: korrake (3, 100 pikslit);
ruudustik-mall-read: 100 pikslit 100 pikslit;

Kaudse ruudustiku loob brauser. Kaudse ruudustiku suurust saab muuta ruudustiku automaatsete veergude ja ruudustiku automaatsete ridade atribuutide abil.

ruudustik-mall-veerud: korrake (3, 100 pikslit);
ruudustik-automaatne read: 100 pikslit;

Võrgu järjekord:

Elemendi saab tellida malli ala omaduste järgi.

saame muuta malli ala meediumipäringus ja kuvada uue ruudustiku struktuuri.

lisateabe saamiseks kontrollige nokkpliiatsi.

Võrgu jaoks kasutame enamasti kõik alglaadimisvõrgustiku süsteemi. Bootstrap võib muuta iga klassi nime igas versioonis (kuid mitte nii nagu nurgeline ), seega peame meeles pidama, millisel versioonil on millise klassi nimi .

Kasutades CSS-i ruudustikku, saame VÕIMALIKULT (isegi IE-s) elemente hõlpsalt kuvada ruudustiku vaates.

Suur tänu lugemise eest! Kui teile meeldis, palun toetage plaksutades ja postitust jagades. Jäta julgelt kommentaar allpool.