Programozott tananyag:
Rácsos elrendezés létrehozása
A display: grid; vagy a display: inline-grid; beállítással létrehozhatunk egy Grid konténert, amelynek elemeit sorokba és oszlopokba rendezhetjük.
Oszlopok száma és szélessége
A grid-template-columns tulajdonság segítségével adhatjuk meg a használni kívánt oszlopok szélességét.
Oszlopok távolsága
A grid-column-gap tulajdonság segítségével adhatjuk meg az oszlopok közötti távolságot.
Rugalmas oszlopszélesség
Egy Grid konténeren belül használhatjuk a fraction-t (fr), amelynek értékét a böngésző számolja ki számunkra a rendelkezésre álló terület.
Sorok száma és szélessége
A grid-template-rows tulajdonság segítségével adhatjuk meg a használni kívánt sorok magassága.
Sorok távolsága
A grid-row-gap tulajdonság segítségével adhatjuk meg a sorok közötti távolságot.
Gyermekelem kezdőoszlopa
A grid-column-start tulajdonság segítségével állíthatjuk be, hogy az adott gyermekelem melyik oszlopban kezdődjön.
Gyermekelem záróoszlopa
A grid-column-end tulajdonság segítségével állíthatjuk be, hogy az adott gyermekelem hányadik oszlopig tartson.
Gyermekelem kezdősora
A grid-row-start tulajdonság segítségével állíthatjuk be, hogy az adott gyermekelem melyik sorban kezdődjön.
Gyermekelem zárósora
A grid-row-end tulajdonság segítségével állíthatjuk be, hogy az adott gyermekelem hányadik sorig tartson.
Gyermekelem vízszintes pozíciója
A grid-column összevont tulajdonság segítségével egy lépésben állíthatjuk be a grid-column-start és a grid-column-end tulajdonságokat.
Gyermekelem függőleges pozíciója
A grid-row összevont tulajdonság segítségével egy lépésben állíthatjuk be a grid-row-start és a grid-row-end tulajdonságokat.
Gyermekelem pozíciója
A grid-area összevont tulajdonság segítségével állíthatjuk be a gyermekelem rácsban elfoglalt pozícióját, vagy adhatunk számára egy nevet.
Gyermekelemek pozíciói
A grid-template-area összevont tulajdonság segítségével állíthatjuk be a gyermekelemek pozícióit a grid-template-area tulajdonságuknál megadott nevükre hivatkozva.
Gyermekelem vízszintes igazítása
A justify-self tulajdonság segítségével vízszintesen igazíthatjuk a cellák tartalmát.
Gyermekelem függőleges igazítása
A align-self tulajdonság segítségével függőlegesen igazíthatjuk a cellák tartalmát.
Oszlopok vízszintes igazítása
A justify-items tulajdonság segítségével vízszintesen igazíthatjuk a oszlopok tartalmát.
Sorok függőleges igazítása
A align-items tulajdonság segítségével függőlegesen igazíthatjuk a sorok tartalmát.
Grid modell
tulajdonságok
a tananyagban
| grid-template-columns | CSS3 |
| grid-column-gap | CSS3 |
| grid-template-rows | CSS3 |
| grid-row-gap | CSS3 |
| grid-column-start | CSS3 |
| grid-row-end | CSS3 |
| grid-row-start | CSS3 |
| grid-column-end | CSS3 |
| grid-row | CSS3 |
| grid-column | CSS3 |
| grid-area | CSS3 |
| grid-template-area | CSS3 |
| justify-self | CSS3 |
| align-self | CSS3 |
| justify-items | CSS3 |
| align-items | CSS3 |