Postavitve CSS Grid Starter - CSS-triki

Anonim

To je zbirka začetnih predlog za postavitve in vzorce z uporabo mreže CSS. Njihova ideja je pokazati, kaj je tehnika sposobna narediti, in zagotoviti izhodišče, ki ga je mogoče preoblikovati za druge projekte.

Ne pozabite, da je podpora za Grid v brskalnikih dobra, vendar za starejše brskalnike zahteva nadomestne programe. To pomeni, da njihova neposredna kopija in lepljenje morda ni primerna za nekatere primere uporabe.

Postavitev svetega grala

Stara klasična postavitev v treh stolpcih, kjer sta dve stranski vrstici in vsebnik, ki vsebuje telesno kopijo, stisnjena med glavo in nogo celotne širine.

Prilagodljiv sveti gral

Vse ostane nedotaknjeno, ko se s pomočjo vsebnika s tekočino spremeni širina vidnega polja.

Oglejte si mrežo CSS Pen - Sveti gral 2, avtor Geoff Graham (@geoffgraham) na CodePen.

Odziven sveti gral

Stvari se zložijo, ko se pogled zmanjša.

Oglejte si mrežo CSS Pen: Postavitev svetega grala - odziven Geoff Graham (@geoffgraham) na CodePen.

2-stolpca z glavo in nogo

Klasična postavitev bloga, kjer je en stolpec za objavo, drugi pa za stransko vrstico.

Prilagodljivi 2-stolpci

Postavitev postane mehka, ko se ozko okno zoži, vendar postavitev ostane na svojem mestu.

Oglejte si mrežo CSS Pen: Glava, noga z 2 stolpci (prilagodljiva), avtorja Geoff Graham (@geoffgraham) na CodePen.

Odzivni 2-stolpci

Stvari se zložijo na manjše zaslone.

Oglejte si mrežo CSS Pen: Glava, noga z 2 stolpci (odziven), avtor Geoff Graham (@geoffgraham) na CodePen.

Enakomerno porazdeljen, primeren po potrebi

Elementi se pretakajo v postavitev in končajo, ko jih ni več.

Oglejte si mrežo CSS Pen, enakomerno porazdeljeno, kolikor jih potrebuje Geoff Graham (@geoffgraham) na CodePen.

Članek z zlomom

Odličen mali trik Tylerja Sticke, ki elementu omogoči, da se izbije iz mreže. Rachel Andrew ponuja temeljito razlago o tem, kako imenovane mrežne črte to omogočajo.

Glej Pen CSS Grid: članek z zlomkom Geoff Graham (@geoffgraham) na CodePen.

Osnovni koledar

Kot lahko pričakujete, mreža CSS dobro deluje za mrežo koledarja.

Oglejte si Pen CSS Grid: Koledar Geoff Graham (@geoffgraham) na CodePen.

Odbor za monopol

Preprosta rekreacija igralne plošče. Jen Simmons ima čudovit demo skupaj z Monpoly stili.

Glej Pen CSS Grid: Monopoly Board Geoff Graham (@geoffgraham) na CodePen.

Naš učni partner Frontend Masters

Potrebujete razvojno usposabljanje?

Frontend Masters je najboljše mesto za to. Imajo tečaje o vseh najpomembnejših front-end tehnologijah, od React-a do CSS-a, od Vueja do D3 in še več z Node.js in Full Stackom.