Bevezetés a CSS Gridbe

A CSS grid olyan módot kínál az elemek elhelyezésére, amely egyszerre vizsgálja a vízszintes és a függőleges irányt is. Ez fejlettebb megközelítés mint a flexbox, ugyanakkor elsajátítása bonyolultabb.

Grid létrehozásához egy elem display tulajdonságát grid értékre kell állítani:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
}

Ezt követően az elem egy kétdimenziós rácssá válik, amelyben az elemek függőlegesen (oszlopok) és vízszintesen (sorok) helyezkednek el. Azt a területet, ahol egy oszlop és egy sor metszi egymást, cellának nevezzük.

Speciális tulajdonságok segítségével az elemeket mind sorok, mind oszlopok szerint lehet elhelyezni. Ez lehetővé teszi például az ilyen elrendezések egyszerű létrehozását:

A következő leckékben először az elemek oszlopok szerinti elhelyezését tanulmányozzuk, majd áttérünk a sorok tanulmányozására, és végül összevonjuk mindezt.