Mi az a rácstulajdon?

A rács tulajdonság a rács-sablon-sorok, rács-sablon-oszlopok, rács-sablon-területek, rács-automatikus sorok, rács-automatikus oszlopok, rács-automatikus áramlás, rács-oszlop-rés rövidített tulajdonsága , és a rács sorrés tulajdonságai.

Rács szerkezete

A rács tulajdonsága miatt az elemek megjelennek, mint a mátrix ⊞

 
 
 
 
 
 
 
 

Css-ben

#container {
 kijelző: rács;
 }

Példaként a #tartály rácsként jelenik meg, és annak gyermekeleme rácsos cellákként vagy elemekként jelenik meg

Böngésző kompatibilitás

Nagyon izgalmas, hogy az IE, az Edge, a Firefox támogatja a CSS grid tulajdonságát . Leginkább az összes böngésző gyönyörű rácsnézetű felhasználói felülettel rendelkezik a fejlesztői eszközökben.

Rácsvonalak

A rácsvonalak vízszintes és függőleges vonalak, amelyeket a pozicionáláshoz használnak. A pozicionálási index egész szám lehet (negatív és pozitív egész is).

Tulajdonságok → rács-oszlop-kezdés, rács-oszlop-vége, rács-sor-vége, rács-sor-vége.

Minta kód:

#grid> div: n. gyermek (2) {
 rács-oszlop-start: 2;
 rácsoszlop vége: 3;
 rács-sor kezdés: 2;
 rács sor vége: 3;
}

A 2. elem a vízszintes vonal második függőleges vonalánál kezdődik, és az elem 3 függőleges vonalon és 3 függőleges vonalon végződik.

Rács vonal

Rács cella

A rácscellák a szomszédos függőleges rácsvonalak és a két szomszédos vízszintes rácsvonalak közötti tér.

Rács cella

Rácspályák

A rácspálya két szomszédos rácsvonal közötti hely. vagyis sor, oszlopok.

Rács pálya

Rácsterület és rácsrés

A rácsterület egy vagy több cella csoportja.

A Rácsrés a sorok és az oszlopok közötti tér. Rács-sor-rés és rács-oszlop-rés rövidített tulajdonsága.

Rács sor és rács oszlop

A rács-sor rövidített tulajdonság a rács-sor elindításához és rács sorának végéhez.

A rács-oszlop rövidített tulajdonság a rács-oszlop-kezdés és -rács-oszlop-vég számára

Rács sorban

rács-sor-indítás → meghatározza a rács elem kezdő pozícióját a sorban

pl.háló-soros indítás: 2 → Az elem a második függőleges vonalon kezdődik

rács-sor vége → a rács elem véghelyzetét adja meg a sorban

pl.háló sorvég: 3 → Az elem a második függőleges vonalon végződik

Rács-auto-flow

Ez az automatikus elhelyezési algoritmus működését szabályozza. Alapértelmezés szerint az érték sor (az elemek sorba kerülnek)

rács-auto-Flow: sorban;
rács-auto-Flow: oszlop;
Rács automatikus áramlási oszlop és rács automatikus áramlási sor

rács-automatikus áramlás: sor sűrű → A „sűrű” csomagolási algoritmust használja. Töltse ki a szabad helyet a rács sorban.

rács-automatikus áramlás: oszlop sűrű → A „sűrű” csomagolási algoritmust használja. Töltse ki a rács szabad helyét oszlop alapján

Explicit rács és implicit rács

Az explicit rács a felhasználó által a rács-sablon-sor, rács-sablon-oszlopok segítségével létrehozott rács

rács-sablon-oszlopok: ismételje meg (3, 100 képpont);
rács-sablon-sorok: 100 képpont 100 képpont;

Az implicit rácsot a böngésző hozza létre. Az implicit rács mérete módosítható a rács-automatikus oszlopok és a rács-automatikus sorok tulajdonság használatával.

rács-sablon-oszlopok: ismételje meg (3, 100 képpont);
rács-automatikus sorok: 100 képpont;

Rács sorrend:

Az elemet sablonterület tulajdonság alapján rendezhetjük.

megváltoztathatjuk a sablonterületet a médiakeresésben és megjeleníthetjük az új rácsszerkezetet.

ellenőrizze a codepen-et további információkért.

A rácshoz többnyire a bootstrap rácsrendszert használjuk. A Bootstrap megváltoztathat néhány osztálynevet minden verzióban (de nem olyan, mint a szögletes ), tehát meg kell emlékezni arra, hogy melyik verziónak melyik osztályneve van .

A CSS rácstulajdonság használatával a WE CAN (még IE ) is könnyen megjelenítheti az elemeket rács nézetben.

Nagyon köszönöm az olvasást! Ha tetszett, kérjük, támogassa a pping tapsolással és a post megosztásával. Nyugodtan kommentáljon lent.