CSS Grid – Bevezetés a CSS Grid világába – Alapok

írta

Egyed Balázs

kategóriák

Programozás

beszélgetés

Szólj hozzá!

A CSS Grid egy vadonat új layout technika a CSS nyelvben. Nem egy újabb framework, vagy könyvtár – ez egy fejlesztése a CSS-nek amivel könnyedén létrehozhatunk kétdimenziós elrendezéseket a HTML-ben.

Ha ez a megfogalmazás nem lenne világos, akkor képzeld el úgy mint egy olyan technológiát amivel a weboldal elemeit lehet elhelyezni a rendelkezésre álló területen mindössze néhány sor CSS leírásával.

Persze most mondhatnánk hogy ezt eddig is megtehettük a régebbi időkben float-oltuk az elemeket, mostanában már inkább a flexbox-ot alkalmaztuk, de minddel az volt a probléma hogy bonyolulttá tette a weboldal felépítését.

Sok olyan div-et kellett hozzáadni a kódhoz amire kizárólag a kinézet felépítése miatt volt szükség, és sok olyan dolgot tudunk vele megtenni ami nehézkes, vagy lehetetlen lenne flexbox segítségével. Ez most megszűnik, a CSS Grid segítségével.

A felépítése elsőre kicsit talán ilyesztő lehet az új szintaxis és elrendézésötletek miatt, de hidd el megéri megtanulni mert elég egyszerű és nagyban egyszerűsíti a weboldalak programozását.

CSS Grid – Alapok

Az elején elég lesz pár darab parancsot megjegyezni, ezekkel már egy alap kinézetet össze tudunk rakni. Ahhoz hogy használni tudjuk, először el definiálni kell a gridet, ezt a display: grid; majd meg kell a cellák grid-template-columns és a sorok grid-template-rows méretét, és számát. A sorok és cellák közötti távolságot pedig a grid-gap parancssal tudjuk állítani.

A CSS Grid-ben nem számít a sorrendje az elemeknek, hasonlóan a flexboxhoz (átrendezhetőek az elemek), ezért nagyon könnyű lesz az oldalt reszponzavvá tenni a media query-k segítségével. Azonban egyenlőre ne szaladjunk ennyire előre.

Maradjunk a fenti négy parancsnál, és hozzunk létre egy egszerű HTML oldalt az alábbi szerkezettel:

<html>
  <head>
    <title>css grid gyakorlás</title>
    <style>
       /* ide fogunk dolgozni */
    </style>
  </head>
  <body>
    
    <!-- Ez az egész grid ennél többet nem kell beleírni -->
    <div class="grid">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>

Mostmár elkezdhetjük a CSS írását a fent megismert parancsokkal:

/* ez itt most a lényeg */
.grid{
  /* definiáltuk, hogy ez az elem gridet használ */
  display: grid;
  /* itt megadtuk, hogy hány oszlop legyen a gridben
  később erre majd mutatok trükköt, hogy hogyan lehet gyosítani az oszlopdefiniálást */
  grid-template-columns: 1fr 1fr 1fr;
  /* ezzel a sorok nagyságát 100 pixelre állítottuk */
  grid-template-rows: 100px 100px 100px 100px;
  /* az elemek közötti távolságot 30 pixelre állítottuk */
  grid-gap: 30px;
}
/* eddig */
/* csak azért adunk neki hátteret, hogy lássuk a gridet */
.item{ background: #ccc; }

Ha minden jól csináltunk akkor látnunk kell egy egyszerű rácsszerkezetet két sorral egyenlő nagyságú elemekkel.

Csavarjunk egyet a dolgon, és hozzunk létre igazi layout-ot

Ahoz hogy a rácsszerkezetünknek ‘rendes’ weboldalszerű kinézete legyen és ne legyen ennyire szabályos, lehetőségünk van összevonni sorokat és oszlopokat ezáltal menüsávot, oldalsávot és egyéb szerkezeti elemeket létrehozni.

Ehhez két újabb parancsra lesz sükségünk, mégpedig a grid-column és a grid-row parancsra. A fenti CSS fájlunkhoz adjuk hozzá az alábbi sorokat, és nézzük meg a hatást:

.item:first-of-type,
.item:last-of-type{ grid-column: span 3; }
.item:nth-of-type(2){ grid-row: span 2 }
.item:nth-of-type(3){ grid-row: span 2; grid-column: span 2 }

Ebben a kódban összevontuk az első és az utolsó elemet egy sorba, ez lesz majd a menü és a lábéc, valamint a 2. és a 3. elemet összevontuk az alatta lévő sorral és ez lesz majd az oldalsáv és a tartalmi rész.

A folyatásban

Ha felkeltettem az érdeklődésed a CSS Grid iránt akkor iratkozz fel a lájkolj a jobb oldalon és értesítelek a további részekről amikből megtuthatod, hogy:

  • Hogyan kell reszponzívvá tenni a grideket
  • Méretezési, összevonási trükköket
  • Parancsismétlés repeat() függvénnyel
  • Sablonkezelés (template area)
  • Középreigazítás vertikálisan és horizontálisan
  • Sorrend alakítása
  • és még sokminden más

Addig is itt találsz bővebb információt a CSS gridekről, igaz, angol nyelven.

Egyed Balázs

Szabadúszó WordPress programozó, fejlesztéseit több mint 50 országan és többszáz weboldalon használják. Az elmúlt 10 évben vállalkozásokkal, kiadókkal, webshopokkal dolgozott együtt, egyedi weboldalakat épített megadott igények és célok szerint.

Készen állsz a weboldald fejlesztésésre?

Egyedi WordPress weboldalakat építek, amik jól néznek ki és könnyen kezelhetőek.

Beszélgessünk

További cikkek ebben a sorozatban

Hogyan készíts Custom Post Type-ot WordPress alatt?

Alapó csak három Post Type-ot kapunk a WordPress-ben, de hála a Custom Post Type-nak hála nagyon egyszerűen hozhatunk létre egyedi tartalomtípusokat.

Hogyan lehet dinamikusan elkérni a WooCommerce oldal URL-eket?

A egy webshop fejlesztése során számítani kell kell arra, hogy a WooCommerce oldal URL-ek megváltozhatnak. Ezeket pedig le kell tuni kezelni.

Szólj hozzá!