Bevezetés a CSS rács elrendezésébe (példákkal)

A CSS Grid átvette a webdesign világát. Ez nagyon király. Rengeteg oktatóanyag, blog és cikk található az interneten, amelyek remek tudásforrások.

De többségük nagyon kevés valós példával tanítja meg az alapokat. Tehát ebben az útmutatóban a tanulás során megnézzük a példákat.

Mi a rács?

A CSS Grid lehetővé teszi számunkra, hogy jobb elrendezéseket írjunk a rácsok böngészőbeli képességeinek felhasználásával. A CSS Grid előtt vagy saját saját rácsrendszert kellett használnunk, vagy valami hasonlót a Bootstrap-hoz.

Ezek a további lehetőségek jól működnek, de a CSS rács elveszíti a fájdalmat a legtöbb dologban, amellyel szembesültünk a megoldásokban.

A CSS Grid sütemény egy egyszerű és összetett elrendezés kidolgozásához. Ebben a blogban megtanulunk néhány alapvető terminológiát, majd folytatunk egy egyszerű elrendezési példával.

Alapfogalmak

A CSS Gridhez kapcsolódó alapvető kifejezések a következők:

  1. Oszlopok
  2. Sorok
  3. Sejtek
  4. Rácsvonalak
  5. Esővízcsatorna

Az összes kifejezést a fenti ábra magyarázza. Ez a példa 3x2 oszloprács, ami 3 oszlopot és 2 sort jelent.

Példa elrendezésre

Most, hogy az alapfogalmak nincsenek útban, ezeket a fogalmakat felhasználva elkészítjük az alábbi példa-elrendezést:

Amint láthatja, van egy fejléc és egy lábléc. Ezután a középső sorban 3 oszlop található, amelyek jobb oldalon az első oszlop oldalsávjában található a nav, a közepén pedig a fő tartalmi terület (amely a sor nagy részét elfoglalja).

Az alábbiakban bemutatjuk a példa HTML mintáját.

 HEADER NAV CONTENTS ASIDE FOOTER 

Most, hogy a HTML nem áll az utunkban, ássunk bele a CSS-be. Először is adjunk neki egy kis stílust, hogy a HTML-nk a fentieknek megfelelően nézzen ki. Ezek a CSS-szabályok nem részei a CSS-rácsnak, így ha akarja, elhagyhatja azokat.

.wrapper * { background: orange; display: flex; justify-content: center; align-items: center; margin-bottom: 1px; margin-right: 1px; }

Mint láthatja, az összes elemet megformázom egy burkolóedény belsejében. Én beállításával háttérszínt orangeés így bottom, és rightmargins.én beállítás displayflexcsak align példány holtpont beállításával justify-contentés align-itemsa center.

Ezután lépjünk be a CSS Grid részébe.

.wrapper { display: grid; grid-template-columns: 1fr 5fr 2fr; grid-template-rows: 5fr 20fr 5fr; grid-gap: 10px; height: 720px; }

A fenti kódrészletet hozunk display, hogy grid- innen a cím a téma. Így alakítjuk át a tárolót grid.

Ezután beállítjuk az oszlopokat és a sorokat. Ezt a grid-template-columnsés grid-template-rowstulajdonságok használatával fogjuk megtenni . grid-template-columnslehetővé teszi, hogy beállítsuk az oszlopok számát a megfelelőikkel width. grid-template-rowslehetővé teszi számunkra, hogy állítsa be a számát rowsés azok megfelelő height.

A fenti példában 3 oszlop van az első oszlop felvételével 1 fraction, a második oszlop felvételével 5 fractionés a harmadik oszloppal 2 fractions. Egyetlen frakcióegység azt jelenti, hogy „egy darab, bármennyi darabból is felosztjuk” .

Ha ugyanazt a példát nézi fent, ugyanaz a koncepció vonatkozik rows. Három sor van, és az első sor tartalmazza azt, headeramely a teljes sort átveszi mindhárom oszlopban. A második sor a navigációt, a tartalmat és a félreteszi, míg a lábléc a harmadik és az utolsó sorba kerül, és mindhárom oszlopot felveszi.

Ez azt jelenti, hogy az első és az utolsó sor ugyanannyi magasságot vesz fel, vagyis 5 fractions. És a középső sor veszi fel a fennmaradó magasság fennmaradó részét.

Ezután létrehozunk egy 10px csatornát is. Ezt megtehetjük a CSS Grid-ben az grid-gapingatlan használatával. Végül beállítottunk egy magasságot a csomagolóeszközünk számára.

Ha megnézzük a böngészőben, megkapjuk a kívánt eredményt:

Most tegyük úgy, hogy jobban nézzen ki, ha szeretnénk, hogy a fejléc és a lábléc néhány tulajdonságát beállítsuk. Meg fogjuk mondani a fejlécnek és a láblécnek, hogy foglalják el a teljes sorukat.

Ezt a grid-column-startés grid-column-endtulajdonságok használatával fogjuk megtenni , például:

header { grid-column-start: 1; grid-column-end: 4; } footer { grid-column-start: 1; grid-column-end: 4; }

Mint látható, mind a fejléc, mind a lábléc grid line1- től kezdődik és grid line4- nél végződik . Ez lehetővé teszi számukra, hogy a teljes sorukat elfoglalják. Ez megadja azt a pontos kimenetet, amelyet keresünk, az alábbiak szerint:

Teljes kód

   CSS Grid  .wrapper { display: grid; grid-template-columns: 1fr 5fr 2fr; grid-template-rows: 5fr 20fr 5fr; grid-gap: 10px; height: 720px; } header { grid-column-start: 1; grid-column-end: 4; } footer { grid-column-start: 1; grid-column-end: 4; } .wrapper * { background: orange; display: flex; justify-content: center; align-items: center; margin-bottom: 1px; margin-right: 1px; } HEADER NAV CONTENTS ASIDE FOOTER 

That is it for this article. You can follow me here for more articles. If you liked it, don’t forget to share it on social media.