Mikä on Grid-omaisuus?

Ruudukko-ominaisuus on lyhennetty ominaisuus ruudukko-malli-riveille, ruudukko-malli-sarakkeille, ruudukko-mallipinta-aloille, ruudukko-auto-rivit, ruudukko-auto-sarakkeet, ruudukko-automaattinen virtaus, ruudukko-sarake-aukko , ja ruudukon riviväliominaisuudet.

Ruudukon rakenne

Ruudukko-ominaisuus saa elementit näkymään matriisin like tapaan

 
 
 
 
 
 
 

CSS: ssä

#container {
 näyttö: ruudukko;
 }

Esimerkissä #kontti näytetään ruudukkona ja sen alaelementin ruudukkosoluina tai kohteina

Selaimen yhteensopivuus

On valtava jännitys, että IE, Edge, Firefox tukee CSS-ruudukko-ominaisuutta . Lähinnä kaikilla selaimilla on kaunis ruudukkonäkymän käyttöliittymä kehittäjätyökaluissa.

Ruudukkoviivat

Ristikkoviivat ovat vaaka- ja pystysuoria viivoja, niitä käytetään paikannukseen. Paikannusindeksi voi olla kokonaisluku (sekä negatiivinen että positiivinen kokonaisluku).

Ominaisuudet → ruudukon-sarakkeen alku, ruudukon-sarakkeen pää, ruudukkorivin pää, ruudukkorivin pää.

Näytekoodi:

#grid> div: n. lapsi (2) {
 ruudukon sarakkeen aloitus: 2;
 ruudukon pylvään pää: 3;
 ruudukkorivin alku: 2;
 ruudukon rivinpää: 3;
}

Elementti 2 alkaa toisesta pystysuorasta linjasta 2 vaakaviivaa ja elementti päättyy 3 pystysuoraan ja 3 pystysuoraan viivaan.

Ruudukkoviiva

Ruudukon solu

Ristikon solu on tila kahden vierekkäisen pystysuoran ristikkolinjan ja kahden vierekkäisen vaakasuuntaisen ristikkolinjan välillä.

Ruudukon solu

Grid-kappaleet

Ristikkorata on tila kahden vierekkäisen ristikkolinjan välillä. eli rivi, sarakkeet.

Ruudukon raita

Ruudukon alue ja ruudukon aukko

Ruudukkoalue on yhden tai useamman solun ryhmä.

Ruudukon aukko on rivien ja sarakkeiden välinen tila. Se on lyhennetty ominaisuus ruudukkoriviväli ja ruudukko-pylväsrako.

Ruudukkorivi ja ruudukko-sarake

ruudukkorivi on lyhennetty ominaisuus ruudukkorivin alkamiselle ja ruudukkoriville.

ruudukko-sarake on lyhennetty ominaisuus ruudukko-sarakkeen alkuun ja ruudukko-sarakkeeseen

Ruudukkorivi

ruudukko-rivi-aloitus → määrittää ruudukkokohdan aloituskohdan rivillä

esim. ristikko-rivin alku: 2 → Elementti alkaa toisesta pystysuorasta linjasta

ruudukkorivin pää → määrittelee ruudukkokohdan loppuaseman rivillä

esim. ristikko-rivinpää: 3 → elementti loppuu toisella pystysuoralla viivalla

Grid-auto-flow

Se ohjaa, miten automaattisen sijoittelun algoritmi toimii. Oletusarvon mukaan arvo on rivi (kohteet sijoitetaan riviin)

grid-auto-virtaus: rivi;
grid-auto-virtaus: sarake;
Ruudukon automaattinen virtaussarake ja ruudukon automaattinen virtausrivi

ruudukko-automaattinen virtaus: rivi tiheä → Käyttää “tiheää” pakkausalgoritmia. Täytä ruudukossa oleva vapaa tila rivillä.

ruudukko-automaattinen virtaus: sarake tiheä → Käyttää “tiheää” pakkausalgoritmia.Täytä ruudukossa oleva vapaa tila sarakepohjaisesti

Täsmällinen ruudukko ja implisiittinen ruudukko

Täsmälliset ruudukot ovat käyttäjän luomia ruudukkoja ruudukko-malli-rivillä, ruudukko-malli-sarakkeilla

ruudukko-malli-sarakkeet: toista (3, 100 px);
ruudukko-malli-rivit: 100 kuvapistettä 100 kuvapistettä;

Selain luo implisiittisen ruudukon. Implisiittisen ruudukon kokoa voidaan muuttaa käyttämällä ruudukko-automaattisarakkeita ja ruudukko-auto-rivit -ominaisuutta.

ruudukko-malli-sarakkeet: toista (3, 100 pikseliä);
ruudukko-auto-rivit: 100px;

Ruudukon järjestys:

Voimme tilata elementin mallialueominaisuuden perusteella.

voimme muuttaa mallipinta-alaa mediakyselyssä ja näyttää uuden ruudukkorakenteen.

tarkista pakkauspenkki.

Ruudukkoon käytämme pääosin kaikki bootstrap-ruudukkojärjestelmää. Bootstrap saattaa muuttaa luokan nimeä jokaisessa versiossa (mutta ei niin kuin kulmikas ), joten meidän on muistettava, millä versiolla on minkä luokan nimi .

CSS-ruudukko-ominaisuuden avulla voimme (jopa IE ) näyttää elementit helposti ruudukkonäkymässä.

Kiitos paljon lukemisesta! Jos pidit siitä, tue napsauttamalla ja jakamalla viesti. Jätä kommentti alla.