Креирајте модерне распореде лако помоћу Гридлек ЦСС Грид система
Израда фронта је радикално побољшана увођењем ЦСС флекбок. Због тога је много лакше креирајте решетке и колоне које се природно мењају за одговарајући распоред.
Уместо да кодирате своју флексибилну мрежу од нуле, много је лакше користити алат као што је Гридлек. Овај бесплатни опен-соурце флекбок библиотека је супер лаган и веома лако се прилагођава.
Све што радиш је додајте Гридлек стилесхеет на своју веб страницу и раде са својим класама мреже. Унутрашње колоне узимају класу .цол и све ово замотате у а .грид контејнер. Ово дефинише сваку колону на истој ширини и креира јединствен интерфејс.
Тхис дефаулт може бити поништена додавањем класификације у сваку колону. На тај начин можете имати једну колону на 70% ширине и другу колону на 30% ширине (нпр. Садржај / бочна трака).
Пронаћићете тонове грид самплес на почетној страници Гридлека ливе демос и исјечке кода да копирате / залијепите на своју локацију. То је огромна библиотека са толико много изборне класе да вам помогне да направите најједноставније решетке за било који веб сајт.
Све решетке се додају а укупно 12 мини колона, тако да можете да одредите колико простора ће свака колона заузети. Ово може изгледати збуњујуће, али има смисла када видите визуелне демо датотеке.
Ево једног цоде екампле користи се за већу мрежу са различитим ширинама:
………
Приметите да је .грид класа садржи све и колоне покушавају подељен на 12 делова (у примјеру би то била фор ширина за сваку). Међутим, фиксне колоне спан 2 и 6 цолс односно, прва колона користи аутоматску ширину на основу свега што је остало.
Користећи друга два ступца, можемо закључити да би остало 4 колоне (12-6-2) лијево укупно 12. Све је то врло једноставна математика, али имена класа могу бити збуњујућа. Када почнете да се играте са Гридлеком на пројекту, брзо ћете покупити систем именовања.
Гридлек је тренутно у верзији 2.к и његове стално се ажурира он ГитХуб. Како подршка за претраживаче расте, ја бих гарантовао више пажње на флекбок, са више сајтова који усвајају овај модел за решетке страница.
Можете чак наћи и фулл галлери веб сајтова који покрећу Гридлек да виде како то изгледа када се примењује на веб сајтове уживо.
Ако никада раније нисте користили флекбок, Гридлек може бити забавна библиотека са којом се можете играти. Али препоручујем да прво вежбате забавне флекбок игре да бисте тестирали своје знање и помогли да разумете основе.
Гридлек је доступно бесплатно у ГитХуб репо или га можете повући преко нпм или бовер. Нуди фулл доцументатион на главном сајту, укључујући демо за колоне различитих ширина и медијске упите.
Имаш потпуна контрола преко флекбок дизајна и то само узима неколико ЦСС класа да се то деси! А ако икада имате брзо питање или желите да делите сајт који сте направили помоћу Гридлек-а, можете послати поруку креатору на Твиттер-у @вебдевлинт.
