Szerezz vele griddy-t: készítsd el saját CSS-rácsodat, és dobd le a kereteket

Szinte minden elülső fejlesztő útja az alapvető HTML, CSS, JavaScript útvonallal kezdődik. Először a felépítéssel kezdi, tisztességessé teszi, majd tesz valamit. Az utazás során azonban valahol könnyen belemerül a CSS keretrendszer világába, és áttekinthetőbbé teheti a legfinomabb részleteket.

A Bootstrap a szép, szép rácsával érkezik, mindössze néhány osztályt és egy CDN-t használva, hogy ezt a szép, mobilra reagáló rácsot létrehozza. És mielőtt még megismerné, elkezdi elérni ezt a keretrendszert, valahányszor rácsos elrendezésű projektet épít. Gyakran tettem ugyanezt, egészen addig, amíg el nem kezdtem a „Gidin 'Griddy With It” -t.

A CSS Grid elsajátításának útja az volt, amikor a Semantic UI React (a szebb és kevésbé homályos Bootstrap) használatával próbáltam webhelyet felépíteni. Rács felépítésekor azonban nem tudtam két oszlopot egy szintben ülni egymással, és végül minden margót és párnázási szabályt elrontottam a nap alatt, hogy felülírjam a keretrendszer által beépített stílusokat. Elkeserítő volt a tapasztalat, és több időt töltöttem el a sajátosságokkal való szabályozással, mint a tényleges kódolás.

Ott jön be a CSS Grid. A CSS Grid egy viszonylag új kiegészítés a CSS3-hoz, a fiú pedig egy csomó. Az importált rács keretrendszerre való felkeresés néhány kérdéshez vezet:

  1. Megnövelt fájlméret. Minél többet importál, annál nagyobb lesz az alkalmazása. Abban a pillanatban, amikor a sebesség kulcsfontosságú, az alkalmazásfájl méretének csökkentése hihetetlenül fontos gondolat. A keretrendszer importálása, vagy a lassú CDN-re támaszkodva eheti a sajátját.
  2. Kevésbé olvasható kód. Akik használták a keretrendszert, ismerik az egyre összetettebb és homályosabb osztályneveket, amelyek ezzel együtt járnak. Ki nem ismeri fel azonnal, hogy mi class="col-6 col-md-4 col-sm-12"áll? Vagy ki akar végül div.ui.segment.inverted.stackable.desktop.twelve.mobile.sixteena CSS- be írni ?
  3. Kevesebb testreszabás. A keretrendszer beépített szabályait nehéz lehet felülírni. Végül hosszú osztálynévvel rendelkezhet a helyes specifikáció elérése érdekében, vagy végül sor után !importantcímkékkel hozhat létre egyedi stílusokat, amelyek felülírják a keretrendszert. A CSS Grid varázsa az, hogy saját maga készítheti el és testreszabhatja az Ön igényeinek megfelelően, ahelyett, hogy másokra támaszkodna, akiknek nem volt célja a projekt sajátosságai.

Reszponzív CSS rács

A CSS Grid lényegében olyan dobozok csoportja, amelyek elférnek egy oldalon. A dobozok méretezéséhez használhatja a számegységeket, vagy a válaszadóképességet a relatív méretekkel. A képernyőn megjelenő méretek sokféleségével ez nagy plusz. Tegyük fel, hogy hat div elrendezést szeretne létrehozni, és azt szeretné, hogy reagálók legyenek, több oszlopban, különböző képernyőméretekhez.

Ez úgy néz ki, mintha nem lenne formázva hatként divsegy konténerben.

Ahelyett, hogy osztályokat kellene adni az egyes töréspontokhoz, beállíthatja a div minimális méretét egy rácsban, majd a frméretezési tulajdonság használatával automatikusan kitöltheti nagyobb reszponzív mezőket . Csak hozzá kell adnia a CSS Grid tulajdonságokat a szülőhöz, és akkor a small-boxdiv-ek automatikusan kitöltődnek.

A tároló CSS-je az alábbi:

Mint láthatja, csak négy kódsorból hozhat létre egy egyszerű reszponzív rácsot. Nem lehet könnyebb, és az összes tartalom szabadon mozoghat és szükség szerint keverhet. Ebben az esetben nem is szükséges média lekérdezés. Innen szabadon testreszabhatja az egyes rácsokat a Rácsban. Elég rugalmas az érzékeny elrendezésekhez és méretekhez. Játsszon vele, és nézze meg, ahogy a dobozok varázslatosan mozognak.

Rácsterületek

A másik ok, amiért hajlamosak lennék keretrendszerhez nyúlni, az volt, hogy különböző eszközökön különböző elrendezésekhez használtam. Érdemes lehet, hogy az alkatrészek mozogjanak, attól függően, hogy éppen milyen méretű a képernyő.

Az alábbiakban bemutatunk egy példát azokra a webhelyelrendezésekre, amelyeket asztali számítógépen vagy táblagépen érdemes használni. Ennek megváltoztatása meglehetősen egyszerű. Noha egyesek nem szeretik a struktúrát, Ön és ASCII-szerű sablonszerkezetet használ a Rács területekhez.

Tegyük fel, hogy van egy alapvető oldalelrendezése, amelynek fejléce, oldalsávjai, tartalma és lábléce van.

Az oldal elrendezése formázás nélkül így nézne ki, alapértelmezett három oszlop rácsra állítva 1fr 4fr 1fr. A dobozok kitöltődnek, hogy elférjenek a rácson belül elkülönített helyükön. Ha azonban azt szeretné, hogy az oldal elrendezése folyékonyabb és dinamikusabb legyen, mint az alábbiakban, használhatja template-areas.

A kívánt elrendezéshez sablonterületeket kell létrehoznia. Úgy gondolhat rá, mint egy miniatűr ASCII térképre, amely megmutatja, hová szeretné a dobozokat egy oldalon elhelyezni.

Az asztali elrendezés megszerzéséhez készítse el miniatűr térképét, mint az grid-template-areasingatlanban. Minden sor egy sort és neveket tartalmaz az elrendezés megfelelő oszlopaihoz. Láthatja, hogy a fejléc és a lábléc szakaszai az egész oszlop mentén megnyúlnak, amelyekbe vannak elhelyezve. Az oldalsávok és a tartalom is több sorban húzódik, amint azt a „térkép” területen láthatja. Ezután tetszőleges elrendezésre készíthető, hozzáadva a grid-areatulajdonságot a megfelelő div-ekhez, mint a jobb szélső képen. Bármelyiket megnevezheti, ami megfelel a projektjének.

A táblagép nézetben való működéshez egyszerűen meg kell adnia egy média lekérdezést, és át kell váltania a sorrendet a sablonterületein. Könnyen mozoghat a tartalom között a kívánt nézethez. (Ne feledje, hogy ez problémákat okozhat a képernyőolvasókon, ha nem megfelelő a tartalma, ezért ügyeljen arra, hogy a tartalma továbbra is logikusan olvasson.)

Következtetés

Ez az egyszerű bejegyzés határozottan csak megkarcolja annak a felületét, amit a CSS Griddel tehet. De azt gondolom, hogy a legfontosabb, amit ettől el kell vonni, hogy ne féljen a CSS Grid használatától. Ez valóban elég egyszerű, erőteljes és könnyű, ha megszokja az új szintaxist. Menj előre, és élvezd a „Get Griddy With It” -t

További információért a CSS Grid-ről nagyon ajánlom a Wes Bos által tanított //cssgrid.io fájlt. Ez egy fantasztikus bemutató CSS ​​Grid.

Ha kérdése van, feltétlenül nézze meg a CSS trükköket a //css-tricks.com/snippets/css/complete-guide-grid/ címen, hogy többet megtudjon a rácsról.

Ha többet szeretne megtudni munkámról, látogasson el a //theran.co oldalra, és tudjon meg többet rólam.