CSS Grid Starter Layouts - CSS-trikovi

Anonim

Ovo je zbirka početnih predložaka za izglede i uzorke koji koriste CSS mrežu. Ideja je ovdje pokazati što je tehnika sposobna učiniti i pružiti polaznu točku koja se može prenamijeniti za druge projekte.

Imajte na umu da je podrška preglednika za Grid dobra, ali zahtijeva povratne podatke za naslijeđene preglednike. To znači da izravno kopiranje i lijepljenje tih datoteka možda neće biti pogodno za neke slučajeve upotrebe.

Izgled svetog grala

Stari klasični raspored s tri stupca gdje su dvije bočne trake i spremnik koji sadrži kopiju tijela smješteni između zaglavlja i podnožja pune širine.

Fleksibilni sveti gral

Sve ostaje netaknuto dok se širina vidnog polja mijenja pomoću spremnika za sadržaj tekućine.

Pogledajte olovku CSS Grid - Sveti gral 2, Geoff Graham (@geoffgraham) na CodePen.

Odzivni sveti gral

Stvari se slože kad se vidik suzi.

Pogledajte Pen CSS Grid: Layout Holy Grail - Responsive, Geoff Graham (@geoffgraham) na CodePen-u.

2-stupca sa zaglavljem i podnožjem

Klasičan izgled bloga gdje je jedan stupac za post, a drugi za bočnu traku.

Fleksibilni 2-stupci

Izgled postaje gnjecav kad se okvir za prikaz uski, ali izgled ostane na mjestu.

Pogledajte Pen CSS Grid: zaglavlje, podnožje s 2 stupca (fleksibilno), Geoff Graham (@geoffgraham) na CodePenu.

Responzivni 2-stupci

Stvari se slažu na manjim ekranima.

Pogledajte olovku CSS Grid: zaglavlje, podnožje s 2 stupca (odzivno), Geoff Graham (@geoffgraham) na CodePenu.

Ravnomjerno raspoređen, prikladan po potrebi

Elementi se ulijevaju u raspored i završavaju kad ih više nema.

Pogledajte rešetku CSS olovke ravnomjerno raspoređenu, koliko god je potrebno Geoff Graham (@geoffgraham) na CodePen-u.

Članak s Breakoutom

Sjajni mali trik Tylera Sticke koji omogućava elementu da probije mrežu. Rachel Andrew daje temeljito objašnjenje o tome kako imenovane linije mreže omogućuju ovo funkcioniranje.

Pogledajte Pen CSS Grid: članak s probijanjem Geoff Grahama (@geoffgraham) na CodePenu.

Osnovni kalendar

Kao što ste mogli očekivati, CSS Grid dobro funkcionira za mrežu kalendara.

Pogledajte Pen CSS Grid: Calendar Geoff Graham (@geoffgraham) na CodePen.

Odbor za monopol

Jednostavna rekreacija ploče s igrama. Jen Simmons ima slatki demo zajedno s Monpoly stilovima.

Pogledajte Pen CSS Grid: Monopoly Board Geoff Graham (@geoffgraham) na CodePenu.

Naš partner za učenje Frontend Masters

Trebate front-end razvojni trening?

Frontend Masters je najbolje mjesto za to. Imaju tečajeve o svim najvažnijim front-end tehnologijama, od React-a do CSS-a, od Vuea do D3, i dalje s Node.jsom i Full Stackom.