ЦСС Грид Стартер Лаиоутс - ЦСС-трикови

Ово је колекција почетних шаблона за распореде и обрасце који користе ЦСС мрежу. Идеја овде је показати шта је техника у стању да уради и пружити полазну основу која може бити пренамењена за друге пројекте.

Имајте на уму да је подршка прегледача за Грид добра, али захтева резервне верзије за старије прегледаче. То значи да исправљено копирање и лепљење ових датотека можда неће бити погодно за неке случајеве употребе.

Изглед Светог грала

Стари класични распоред са три колоне где су две бочне траке и контејнер који садржи копију тела смештени између заглавља и подножја пуне ширине.

Флексибилни Свети грал

Све остаје нетакнуто док се ширина оквира за приказ мења помоћу контејнера са садржајем течности.

Погледајте оловку ЦСС Грид - Свети грал 2, Геофф Грахам (@геоффграхам) на ЦодеПен.

Одзивни Свети грал

Ствари се сложе кад се видик сузи.

Погледајте оловку ЦСС Грид: Лаиоут Холи Граил - Респонсиве, Геофф Грахам (@геоффграхам) на ЦодеПен-у.

2-колоне са заглављем и подножјем

Класичан изглед блога где је једна колона за пост, а друга за бочну траку.

Флексибилне 2 колоне

Изглед постаје гњецав кад се прозор за приказ уски, али распоред остане на свом месту.

Погледајте Пен ЦСС решетку: заглавље, подножје са 2 колоне (флексибилно) Геофф Грахам (@геоффграхам) на ЦодеПен.

Респонзивне 2 колоне

Ствари се слажу на мањим екранима.

Погледајте оловку ЦСС Грид: заглавље, подножје са 2 колоне (одзивно) Геофф Грахам (@геоффграхам) на ЦодеПен-у.

Равномерно распоређен, уклапа се по потреби

Елементи се уливају у распоред и завршавају када их више нема.

Погледајте решетку оловке ЦСС, равномерно распоређену, колико год је потребно Геофф Грахам (@геоффграхам) на ЦодеПен-у.

Чланак са Бреакоут-ом

Сјајни мали трик Тилера Стицке који омогућава елементу да избије из мреже. Рацхел Андрев даје детаљно објашњење о томе како именоване линије мреже омогућавају да ово функционише.

Погледајте Пен ЦСС Грид: чланак са пробијањем Геофф Грахам (@геоффграхам) на ЦодеПен.

Основни календар

Као што сте могли очекивати, ЦСС Грид добро функционише за мрежу календара.

Погледајте Пен ЦСС мрежу: календар Геофф Грахам (@геоффграхам) на ЦодеПен.

Одбор за монопол

Једноставна рекреација играће плоче. Јен Симмонс има слатки демо у комплету са Монполи стиловима.

Погледајте Пен ЦСС Грид: Монополи Боард Геофф Грахам (@геоффграхам) на ЦодеПен-у.

Наш Фронтенд Мастерс, партнер за учење

Треба вам фронт-енд развојна обука?

Фронтенд Мастерс је најбоље место за добијање. Имају курсеве о свим најважнијим фронт-енд технологијама, од Реацт-а до ЦСС-а, од Вуе-а до Д3, и даље са Ноде.јс-ом и Фулл Стацк-ом.