A rács elrendezése alapvető fontosságú a weboldalak tervezésénél, és a CSS Grid modul a legerősebb és legegyszerűbb eszköz ennek létrehozásához. Én személy szerint szerintem sokkal jobb, mint például a Bootstrap (miért olvashatja itt).
A modul natív támogatást kapott a főbb böngészőktől (Safari, Chrome, Firefox, Edge) is, ezért úgy gondolom, hogy az összes front-end fejlesztőnek meg kell tanulnia ezt a technológiát a nem túl távoli jövőben.
Ebben a cikkben a lehető leggyorsabban áttekintem a CSS Grid alapjait. Mindent kihagyok, ami nem érdekelhet, amíg meg nem érted az alapokat.
Létrehoztam egy ingyenes CSS Grid tanfolyamot is. Kattintson ide a teljes hozzáféréshez
azt.
Alternatív megoldásként tekintse meg ezt a cikket, amely elmagyarázza, hogy mit fog tanulni a tanfolyam során:
Most ugorjunk bele!
Az első rács elrendezés
A CSS Rács két alapvető összetevője a burkoló (szülő) és a
tárgyak (gyermekek). A burkoló a tényleges rács, az elemek pedig a rácson belüli tartalom.
Itt van a hat elemet tartalmazó csomagolás jelölése:
1 2 3 4 5 6 Forduljon a borítás divegy rács , egyszerűen adja meg a kijelző
grid:
De ez még nem tesz semmit, mivel még nem határoztuk meg, hogyan szeretnénk a rácsunkat kinézni. Egyszerűen egymásra rakja a 6 div's-ot.
Hozzáadtam egy kis stílust, de ennek semmi köze a CSS rácshoz.
Oszlopok és sorok
Ahhoz, hogy kétdimenziós legyen, meg kell határoznunk az oszlopokat és a sorokat. Hozzunk létre három oszlopot és két sort. Használjuk a grid-template-rowés grid-template-columntulajdonságokat.
Mivel három értéket írtunk a következőre grid-template-columns, három oszlopot kapunk. Két sort kapunk, mivel két értéket adtunk meg a grid-template-rows.
Az értékek diktálják, hogy milyen szélesre akarjuk oszlopainkat (100 képpont), és milyen magasra a sorainkat (50 képpont). Itt az eredmény:
Annak érdekében, hogy megfelelően megértse az értékek és a rács közötti kapcsolatot, vegye figyelembe ezt a példát is.
.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 50px 50px; } Próbálja megérteni a kód és az elrendezés közötti kapcsolatot.
Így játszik:
Az elemek elhelyezése
A következő dolog, amit meg kell tanulnia, hogy tegye az elemeket a rácsra. Itt kapsz szuperhatalmat, mivel halottá teszi az elrendezések létrehozását.
Hozzunk létre egy 3x3-as rácsot, ugyanazzal a jelöléssel, mint korábban.
.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } Ez a következő elrendezést eredményezi:
Figyelem, csak 3x2 rácsot látunk az oldalon, míg 3x3 rácsként definiáltuk. Ez azért van, mert csak hat elemünk van, amelyekkel kitölthetjük a rácsot. Ha lenne még három, akkor a legalacsonyabb sor is kitöltődne.
Az elemek pozícionálásához és átméretezéséhez megcélozzuk őket, és a grid-columnés grid-rowtulajdonságokat használjuk:
.item1 { grid-column-start: 1; grid-column-end: 4; } Amit itt mondunk, azt akarjuk, hogy az 1. tétel az első rácssoron kezdődjön és a negyedik oszlopsoron érjen véget. Más szavakkal, ez az egész sort lefedi.
Így fog lejátszani a képernyőn:
Zavart, miért van 4 oszlopsorunk, ha csak 3 oszlopunk van? Vessen egy pillantást erre a képre, ahol fekete színnel rajzoltam az oszlopvonalakat:
Figyelje meg, hogy most a rács összes sorát használjuk. Amikor az első tételt az egész első sorba helyeztük, a többi elemet lefelé tolta.
Végül szeretnék bemutatni a fenti szintaxis megírásának egyszerűbb módját:
Annak érdekében, hogy biztosan megértse ezt a koncepciót, rendezzük át egy kicsit az elemeket.
.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } Így néz ki ez az oldalon. Próbáld körbefogni a fejed, miért néz ki. Nem lehet túl nehéz.
És ennyi volt!
Köszönöm, hogy elolvasta! A nevem Per Borgen, a Scrimba társalapítója vagyok - ez a legegyszerűbb módja a kódolás megtanulásának. Tekintse meg adaptív webdesign bootcampunkat, ha meg akarja tanulni a modern weboldal professzionális felépítését.
