Създайте модерни оформления лесно с Gridlex CSS Grid System
Развитието на интерфейса се подобри радикално с въвеждането на CSS flexbox. Това го прави много по-лесно за създайте решетки и колони което естествено се измества за отзивчиви оформления.
Вместо да кодирате вашата собствена гъвкава мрежа от нулата, е много по-лесно да използвате инструмент като Gridlex. Тази безплатна библиотека с отворен код е свръхлеки и много лесно за персонализиране.
Всичко, което трябва да направите, е добавете таблицата със стилове в Gridlex към вашата уеб страница и да работят със своите мрежови класове. Вътрешните колони вземат клас .седловина и обгръщаш всичко това вътре в .решетка контейнер. Това определя всяка колона на същата ширина и създава единен интерфейс.
Това по подразбиране може да бъде отменено добавяйки класове за оразмеряване към всяка колона. По този начин можете да имате една колона с ширина 70% и друга колона с ширина 30% (напр. Съдържание / странична лента).
Ще намерите тонове решетъчни проби на началната страница на Gridlex с живи демонстрации и кодови фрагменти да копирате / поставите в сайта си. Това е огромна библиотека с толкова много незадължителни класове да ви помогне да изградите най-простите мрежи за всеки уебсайт.
Всички мрежи се добавят към a общо 12 мини колони, така че можете да определите колко пространство да поема всяка колона. Това може да изглежда объркващо, но има смисъл, когато видите визуалните демонстрации.
Ето едно пример за код използва се за по-голяма мрежа с различна ширина:
.........
Имайте предвид, че .решетка class съдържа всичко и колоните се опитват да го направят разделени на 12 части (в примера това ще бъде for ширина за всяко). Въпреки това, фиксирани колони обхват 2 и 6 колони съответно първата колона използва автоматична ширина на базата на всичко останало.
Използвайки другите две колони, можем да заключим, че ще останат 4 колони (12-6-2) удари общо 12 души. Всичко това е много проста математика, но имената на класовете могат да бъдат объркващи. След като започнете да играете с Gridlex по проект, бързо ще вземете системата за именуване.
Gridlex в момента е във версия 2.x и е постоянно се актуализира в GitHub. С нарастването на поддръжката на браузъра, бих гарантирал повече внимание на flexbox, тъй като повече сайтове възприемат този модел за мрежови страници.
Можете дори да намерите пълна галерия на уебсайтове, които изпълняват Gridlex, за да видят как изглежда това, когато се прилагат към уебсайтове на живо.
Ако никога преди не сте използвали flexbox, Gridlex може да бъде забавна библиотека, с която да играете. Но аз също препоръчвам да тренирам първо използването на забавни flexbox игри, за да тестваш знанията си и да ти помогне да разбереш основите.
Gridlex е безплатно в GitHub репо или можете да го изтеглите чрез npm или bower. То предлага пълна документация на основния сайт, включително демонстрации за колони с различна ширина и медийни заявки.
Ти имаш пълен контрол над дизайна на flexbox и само отнема няколко CSS класа за да стане това! И ако някога имате бърз въпрос или искате да споделите сайт, който сте построили с помощта на Gridlex, можете да изпратите съобщение на създателя на Twitter @webdevlint.
