Grid.

A display: grid a konténert rácsra osztja. A grid-template-columns az oszlopokat (függőleges sávokat), a grid-template-rows a sorokat írja le. A sávokat rácsvonalak határolják, ezeket 1-től számozzuk – három oszlophoz tehát négy függőleges vonal tartozik. A gyerekek alapból sorban, balról jobbra töltik ki a cellákat; ha elfogynak a megadott sorok, a böngésző újakat hoz létre (ezek az automatikus sorok).

A column-gap az oszlopok, a row-gap a sorok közé tesz hézagot (a régi neve grid-gap volt). A hézag csak a sávok között van, a rács szélén nincs; a rácsvonal a hézag közepén halad.

Egy elem több cellát is elfoglalhat. A grid-column: 1 / 3 azt jelenti: az 1-es függőleges vonaltól a 3-asig tart – vagyis két oszlopot fog át (a záró vonal nem a cella sorszáma!). Ugyanez sorokra a grid-row. A span 2 forma azt mondja: két sávon át, akárhol kezdődik.

Teljes oldalak vázához kényelmesebb, ha a rácsot rajzként írjuk le: minden idézőjeles sor egy rácssor, a benne álló nevek a cellák. Az azonos nevű szomszédos cellák egy téglalap alakú területté állnak össze, a gyerekelemeket pedig a grid-area tulajdonsággal tesszük a területükre. A pont (.) üres cellát jelöl.

A repeat(auto-fill, minmax(120px, 1fr)) annyi legalább 120 px-es oszlopot hoz létre, amennyi elfér. A két kulcsszó csak akkor viselkedik másképp, ha kevesebb az elem, mint az oszlop:

• auto-fill: az üres oszlopok megmaradnak (helyet foglalnak), az elemek nem szélesednek tovább;
• auto-fit: az üres oszlopok összecsuklanak (0 szélességűek lesznek), és a meglévő elemek kitöltik a sort.

• Grid = két dimenzió: oszlopok és sorok egyszerre; flexbox = egy tengely.
• A rácsvonalak 1-től számozódnak; grid-column: 1 / 3 két oszlopot fog át.
• Az fr a szabad hely aránya, a rögzített sávok és a hézagok levonása után.
• A gap csak a sávok között van.
• grid-template-areas: rajzszerű oldalváz; minden területnek téglalapnak kell lennie.
• auto-fill megtartja, auto-fit összecsukja az üres oszlopokat.