{"id":149,"date":"2019-01-29T21:29:05","date_gmt":"2019-01-29T20:29:05","guid":{"rendered":"https:\/\/weart.hu\/blog\/css-grid-alapok\/"},"modified":"2021-04-02T15:11:33","modified_gmt":"2021-04-02T14:11:33","slug":"css-grid-alapok","status":"publish","type":"post","link":"https:\/\/weart.hu\/posts\/css-grid-alapok\/","title":{"rendered":"CSS Grid – Bevezet\u00e9s a CSS Grid vil\u00e1g\u00e1ba – Alapok"},"content":{"rendered":"\n

A CSS Grid egy vadonat \u00faj layout technika a CSS nyelvben. Nem egy \u00fajabb framework, vagy k\u00f6nyvt\u00e1r – ez egy fejleszt\u00e9se a CSS-nek amivel k\u00f6nnyed\u00e9n l\u00e9trehozhatunk k\u00e9tdimenzi\u00f3s elrendez\u00e9seket a HTML-ben.<\/p>\n\n\n\n

Ha ez a megfogalmaz\u00e1s nem lenne vil\u00e1gos, akkor k\u00e9pzeld el \u00fagy mint egy olyan technol\u00f3gi\u00e1t amivel a weboldal elemeit lehet elhelyezni a rendelkez\u00e9sre \u00e1ll\u00f3 ter\u00fcleten mind\u00f6ssze n\u00e9h\u00e1ny sor CSS le\u00edr\u00e1s\u00e1val. <\/p>\n\n\n\n\n\n\n\n

Persze most mondhatn\u00e1nk hogy ezt eddig is megtehett\u00fck a r\u00e9gebbi id\u0151kben float-oltuk az elemeket, mostan\u00e1ban m\u00e1r ink\u00e1bb a flexbox-ot alkalmaztuk, de minddel az volt a probl\u00e9ma hogy bonyolultt\u00e1 tette a weboldal fel\u00e9p\u00edt\u00e9s\u00e9t. <\/p>\n\n\n\n

Sok olyan div-et kellett hozz\u00e1adni a k\u00f3dhoz amire kiz\u00e1r\u00f3lag a kin\u00e9zet fel\u00e9p\u00edt\u00e9se miatt volt sz\u00fcks\u00e9g, \u00e9s sok olyan dolgot tudunk vele megtenni ami neh\u00e9zkes, vagy lehetetlen lenne flexbox seg\u00edts\u00e9g\u00e9vel. Ez most megsz\u0171nik, a CSS Grid seg\u00edts\u00e9g\u00e9vel.<\/p>\n\n\n\n

A fel\u00e9p\u00edt\u00e9se els\u0151re kicsit tal\u00e1n ilyeszt\u0151 lehet az \u00faj szintaxis \u00e9s elrend\u00e9z\u00e9s\u00f6tletek miatt, de hidd el meg\u00e9ri megtanulni mert el\u00e9g egyszer\u0171 \u00e9s nagyban egyszer\u0171s\u00edti a weboldalak programoz\u00e1s\u00e1t.<\/p>\n\n\n\n

CSS Grid – Alapok<\/h2>\n\n\n\n

Az elej\u00e9n el\u00e9g lesz p\u00e1r darab parancsot megjegyezni, ezekkel m\u00e1r egy alap kin\u00e9zetet \u00f6ssze tudunk rakni. Ahhoz hogy haszn\u00e1lni tudjuk, el\u0151sz\u00f6r el defini\u00e1lni kell a gridet, ezt a display: grid;<\/strong> majd meg kell a cell\u00e1k grid-template-columns<\/strong> \u00e9s a sorok grid-template-rows<\/strong> m\u00e9ret\u00e9t, \u00e9s sz\u00e1m\u00e1t. A sorok \u00e9s cell\u00e1k k\u00f6z\u00f6tti t\u00e1vols\u00e1got pedig a grid-gap<\/strong> parancssal tudjuk \u00e1ll\u00edtani. <\/p>\n\n\n\n

A CSS Grid-ben nem sz\u00e1m\u00edt a sorrendje az elemeknek, hasonl\u00f3an a flexboxhoz (\u00e1trendezhet\u0151ek az elemek), ez\u00e9rt nagyon k\u00f6nny\u0171 lesz az oldalt reszponzavv\u00e1 tenni a media query-k seg\u00edts\u00e9g\u00e9vel. Azonban egyenl\u0151re ne szaladjunk ennyire el\u0151re. <\/p>\n\n\n\n

Maradjunk a fenti n\u00e9gy parancsn\u00e1l, \u00e9s hozzunk l\u00e9tre egy egszer\u0171 HTML oldalt az al\u00e1bbi szerkezettel:<\/p>\n\n\n\n

<html>\n  <head>\n    <title>css grid gyakorl\u00e1s<\/title>\n    <style>\n       \/* ide fogunk dolgozni *\/\n    <\/style>\n  <\/head>\n  <body>\n    \n    <!-- Ez az eg\u00e9sz grid enn\u00e9l t\u00f6bbet nem kell bele\u00edrni -->\n    <div class=\"grid\">\n      <div class=\"item\"><\/div>\n      <div class=\"item\"><\/div>\n      <div class=\"item\"><\/div>\n      <div class=\"item\"><\/div>\n    <\/div>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Mostm\u00e1r elkezdhetj\u00fck a CSS \u00edr\u00e1s\u00e1t a fent megismert parancsokkal:<\/p>\n\n\n\n
\/* ez itt most a l\u00e9nyeg *\/\n.grid{\n  \/* defini\u00e1ltuk, hogy ez az elem gridet haszn\u00e1l *\/\n  display: grid;\n  \/* itt megadtuk, hogy h\u00e1ny oszlop legyen a gridben\n  k\u00e9s\u0151bb erre majd mutatok tr\u00fckk\u00f6t, hogy hogyan lehet gyos\u00edtani az oszlopdefini\u00e1l\u00e1st *\/\n  grid-template-columns: 1fr 1fr 1fr;\n  \/* ezzel a sorok nagys\u00e1g\u00e1t 100 pixelre \u00e1ll\u00edtottuk *\/\n  grid-template-rows: 100px 100px 100px 100px;\n  \/* az elemek k\u00f6z\u00f6tti t\u00e1vols\u00e1got 30 pixelre \u00e1ll\u00edtottuk *\/\n  grid-gap: 30px;\n}\n\/* eddig *\/\n\/* csak az\u00e9rt adunk neki h\u00e1tteret, hogy l\u00e1ssuk a gridet *\/\n.item{ background: #ccc; }<\/code><\/pre>\n\n\n\n
Ha minden j\u00f3l csin\u00e1ltunk akkor l\u00e1tnunk kell egy egyszer\u0171 r\u00e1csszerkezetet k\u00e9t sorral egyenl\u0151 nagys\u00e1g\u00fa elemekkel.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Csavarjunk egyet a dolgon, \u00e9s hozzunk l\u00e9tre igazi layout-ot<\/h2>\n\n\n\n
Ahoz hogy a r\u00e1csszerkezet\u00fcnknek ‘rendes’ weboldalszer\u0171 kin\u00e9zete legyen \u00e9s ne legyen ennyire szab\u00e1lyos, lehet\u0151s\u00e9g\u00fcnk van \u00f6sszevonni sorokat \u00e9s oszlopokat ez\u00e1ltal men\u00fcs\u00e1vot, oldals\u00e1vot \u00e9s egy\u00e9b szerkezeti elemeket l\u00e9trehozni. <\/p>\n\n\n\n
Ehhez k\u00e9t \u00fajabb parancsra lesz s\u00fcks\u00e9g\u00fcnk, m\u00e9gpedig a grid-column<\/strong> \u00e9s a grid-row<\/strong> parancsra. A fenti CSS f\u00e1jlunkhoz adjuk hozz\u00e1 az al\u00e1bbi sorokat, \u00e9s n\u00e9zz\u00fck meg a hat\u00e1st:<\/p>\n\n\n\n
.item:first-of-type,\n.item:last-of-type{ grid-column: span 3; }\n.item:nth-of-type(2){ grid-row: span 2 }\n.item:nth-of-type(3){ grid-row: span 2; grid-column: span 2 }<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Ebben a k\u00f3dban \u00f6sszevontuk az els\u0151 \u00e9s az utols\u00f3 elemet egy sorba, ez lesz majd a men\u00fc \u00e9s a l\u00e1b\u00e9c, valamint a 2. \u00e9s a 3. elemet \u00f6sszevontuk az alatta l\u00e9v\u0151 sorral \u00e9s ez lesz majd az oldals\u00e1v \u00e9s a tartalmi r\u00e9sz.<\/p>\n\n\n\n
A folyat\u00e1sban<\/h2>\n\n\n\n
Ha felkeltettem az \u00e9rdekl\u0151d\u00e9sed a CSS Grid ir\u00e1nt akkor iratkozz fel a l\u00e1jkolj a jobb oldalon \u00e9s \u00e9rtes\u00edtelek a tov\u00e1bbi r\u00e9szekr\u0151l amikb\u0151l megtuthatod, hogy:<\/p>\n\n\n\n