Što je Grid Property?

Svojstvo rešetke je svojstvo skraćenja za redove rešetka-predložak-rešetke, stupce-stupaca-rešetke, područja-predloška rešetke, mrežne-automatske retke, mrežne-automatske stupce, rešetke-automatske protoke, mreže-stupaca-zazora , i svojstva razmaka u nizu rešetki.

Struktura rešetke

Svojstvo rešetke čini elemente za prikaz poput matrice ⊞

 
 
 
 
 
 
 
 

U css

#container {
 prikaz: rešetka;
 }

na primjer, #container je prikazan kao mreža, a njegov podređeni element bit će prikazan kao ćelije mreže ili stavke items

Kompatibilnost preglednika

Veliko je uzbuđenje što IE, Edge, Firefox podržava svojstvo CSS mreže . Uglavnom svi preglednik ima prekrasan sučelje mrežnog prikaza u alatima za razvojne programere.

Rešetke

Lideri mreže su vodoravne i okomite linije, koriste se za pozicioniranje. Indeks pozicioniranja može biti cijeli broj (i negativni i pozitivni cijeli brojevi).

Svojstva → grid-column-start, grid-column-end, grid-row-end, grid-row-end.

Uzorak Kod:

#grid> div: nth-dijete (2) {
 grid-column-start: 2;
 rešetka-stupac-kraj: 3;
 grid-row-start: 2;
 rešetka-red-kraj: 3;
}

Element 2 započet će s drugom okomitom linijom u 2 vodoravne linije, a element će završiti u 3 okomite i 3 vertikalne linije.

Grid Line

Mreža ćelija

Stanica rešetke je prostor između dviju susjednih okomitih linija rešetke i dviju susjednih vodoravnih linija mreže.

Grid Cell

Grid Pjesme

Trag rešetke je prostor između dviju susjednih linija mreže. tj. red, stupci.

Grid Track

Grid Area & Grid Gap

Područje rešetke je skupina jedne ili više ćelija.

Grid Gap je razmak između redaka i stupaca. Svojstvo je skraćenja svojstva grid-row-gap i grid-column-gap.

Grid Row & Grid stupac

grid-row je svojstvo skraćenja za grid-row-start i grid-row-end.

grid-column je svojstvo skraćenja za grid-column-start i grid-column-end

Mrežni red

grid-row-start → određuje početnu poziciju stavke mreže u retku

npr.grid-row-start: 2 → Element će započeti u drugoj okomitoj liniji

grid-line-end → određuje krajnju poziciju stavke rešetke u retku

npr.vrsta-kraj-kraja: 3 → Element će završiti u drugoj okomitoj liniji

Grid-auto-tok

Ona kontrolira kako algoritam automatskog postavljanja radi. Prema zadanim postavkama vrijednost je redak (Stavke se postavljaju u red reda)

mreža-auto-flow: red;
rešetke auto-protoka: stupac;
Grid automatski protok stupaca i rešetka automatski protok retka

grid-auto-flow: red gusti → Koristi algoritam za pakiranje "gustog". Ispunite slobodni prostor u rešetki na osnovi retka.

grid-auto-flow: stupac gust → koristi algoritam gustog pakiranja. Popunite slobodni prostor u mreži na bazi stupca

Izričita Mreža i Implicitna mreža

Eksplicitna mreža su rešetke koje korisnik stvara pomoću grid-template-row, grid-template-stupca

grid-template-stupci: ponovite (3, 100px);
rešetke-predložak-redovi: 100px 100px;

Implicitna mreža stvara preglednik. Veličina implicitne mreže može se mijenjati korištenjem rešetke-auto-stupaca i svojstva rešetke-automatski-redaka.

grid-template-stupci: ponovite (3, 100px);
grid-auto-redovi: 100px;

Redoslijed mreže:

Element možemo naručiti prema svojstvu područja predloška.

možemo promijeniti područje predloška u medijskom upitu i prikazati novu strukturu rešetke.

potražite više kodova.

Za mrežu uglavnom svi koristimo sustav za podizanje sustava za podizanje sustava. Bootstrap može promijeniti naziv neke klase u svakoj verziji (ali ne kao ugaoni ), tako da se trebamo sjetiti koja inačica ima naziv klase .

Korištenjem svojstva CSS rešetke, MOŽEMO (čak i u IE ) lako prikazati elemente u prikazu rešetke.

Puno hvala na čitanju! Ako vam se svidjelo, podržite je pljeskom i dijeljenjem posta. Slobodno ostavite komentar u nastavku.