CSS Rács kezdő elrendezések - CSS-trükkök

Ez a kezdő sablonok elrendezéseihez és mintáihoz a CSS Grid segítségével. Az ötlet itt az, hogy megmutassák, mire képes a technika, és olyan kiindulási alapot nyújtanak, amelyet más projektek számára át lehet alakítani.

Ne felejtsük el, hogy a Grid böngészőtámogatása jó, de a régi böngészők számára tartalékokat igényel. Ez azt jelenti, hogy ezek egyenes másolása és beillesztése nem biztos, hogy megfelel bizonyos esetekben.

Szent Grál elrendezés

A klasszikus háromoszlopos elrendezés, ahol két oldalsáv és egy testtestet tartó tároló van elhelyezve egy teljes szélességű fejléc és lábléc között.

Rugalmas Szent Grál

Minden sértetlen marad, mivel a nézetablak szélessége változik egy folyadéktartály használatával.

Lásd a Pen CSS Grid - Holy Grail 2-t Geoff Graham (@geoffgraham) a CodePen-en.

Reszponzív Szent Grál

A dolgok halmozódnak, ha a nézetablak szűkült lesz.

Lásd a Pen CSS Grid: Holy Grail Layout - reagál Geoff Graham (@geoffgraham) a CodePen-en.

2 oszlop fejléccel és lábléccel

Klasszikus blogelrendezés, ahol az egyik oszlop a bejegyzéshez, a másik az oldalsávhoz tartozik.

Rugalmas 2 oszlop

Az elrendezés akkor lesz szikár, ha a nézetablak keskeny lesz, de az elrendezés a helyén marad.

Lásd a Pen CSS rácsot: Fejléc, lábléc 2 oszloppal (rugalmas), Geoff Graham (@geoffgraham) a CodePen-en.

Reszponzív 2 oszlop

A dolgok kisebb képernyőkre rakódnak.

Lásd a Pen CSS rácsot: Fejléc, lábléc 2 oszloppal (érzékeny), Geoff Graham (@geoffgraham) a CodePen-en.

Egyenletesen oszlik el, illeszkedik a szükség szerint

Az elemek beáramlanak az elrendezésbe, és akkor érnek véget, amikor nincs több.

Lásd a Pen CSS rácsot, egyenletesen elosztva, annyi, amennyire Geoff Graham (@geoffgraham) szükséges a CodePen-en.

Cikk kitöréssel

Tyler Sticka remek kis trükkje, amely lehetővé teszi egy elem kitörését a rácsból. Rachel Andrew alapos magyarázatot ad arról, hogy a megnevezett rácsvonalak miként engedik ezt működni.

Lásd a Pen CSS rácsot: Geoff Graham (@geoffgraham) Breakout című cikke a CodePen-en.

Alap Naptár

Ahogy várható volt, a CSS Grid jól működik egy naptárrácsnál.

Lásd: Pen CSS Grid: Geoff Graham (@geoffgraham) naptár a CodePen-en.

Monopólium Igazgatóság

A játéktábla egyszerű kikapcsolódása. Jen Simmons édes bemutatója Monpoly stílusokkal kiegészül.

Lásd a Pen CSS Grid: Monopoly Board-ot Geoff Graham (@geoffgraham) a CodePen-en.

Tanulási partnerünk Frontend Masters

Szüksége van front-end fejlesztő képzésre?

A Frontend Masters a legjobb hely a megszerzéséhez. Tanfolyamokat tartanak a legfontosabb front-end technológiákról, a React-től a CSS-ig, a Vue-tól a D3-ig, és azon túl a Node.js és a Full Stack segítségével.