Геттинг 'Гридди Витх Ит: направите сопствену ЦСС мрежу и испустите оквире

Отприлике свако путовање програмера почиње са основним ХТМЛ, ЦСС, ЈаваСцрипт путем. Започнете са структуром, учините да изгледа пристојно, а затим је натјерате да нешто учини. Међутим, негде током путовања лако је ухватити се у свет ЦСС оквира и утабати неке ситније детаље.

Боотстрап долази са својом лепом лепом мрежом, користећи само неколико класа и ЦДН-ом, како би створио ту лепу решетку која реагује на мобилне уређаје. И пре него што то схватите, почињете да посежете за тим оквиром кад год направите пројекат за који је потребан распоред мреже. Често сам радио исто, то јест док нисам започео „Геттинг 'Гридди Витх Ит“.

Оно што ме је натерало да научим ЦСС Грид било је када сам покушавао да направим локацију помоћу Семантичког корисничког интерфејса Реацт (лепши и мање нејасан Боотстрап.) Међутим, када сам правио мрежу, нисам успео да две колоне стоје у равни. међусобно, и на крају су се зезали са свим маргинама и подметачима под сунцем, да би надјачали стилове које је оквир уградио. Било је фрустрирајуће искуство и провео сам више времена петљајући се са правилима специфичности него заправо кодирањем.

Ту долази ЦСС Грид. ​​ЦСС Грид је релативно нов додатак ЦСС3, а дечко је доози. Прелазак на увезени мрежни оквир доводи до неколико проблема:

  1. Повећана величина датотека. Што више увозите, апликација постаје већа. У тренутку када је брзина кључна, смањење величине датотеке апликације је невероватно важна идеја коју треба размотрити. Уместо да увозите оквир или се ослањате на спор ЦДН, можете да направите свој.
  2. Мање читљив код. Они од вас који су користили оквир знају све сложенија и неодређенија имена класа која долазе уз њега. Ко не препозна одмах шта class="col-6 col-md-4 col-sm-12"значи? Или ко жели да на крају напише div.ui.segment.inverted.stackable.desktop.twelve.mobile.sixteenсвој ЦСС?
  3. Мање прилагођавања. Уграђена правила оквира може бити тешко надјачати. Можда ћете завршити са дугим именима класа да бисте дошли до тачне специфичности или ћете добити ред за редом !importantознака да бисте креирали прилагођене стилове који надјачавају оквир. Магија ЦСС Грид-а је у томе што можете сами да направите и прилагодите га својим потребама, уместо да се ослањате на друге који нису имали на уму специфичности вашег пројекта.

Респонсиве ЦСС Грид

ЦСС Грид је у основи група оквира које можете да уклопите на страницу. Можете да користите бројевне јединице за увећавање оквира или релативне величине да бисте учинили да више одговара. Уз огромну разноликост величина екрана, ово је велики плус. Рецимо да желите да направите распоред од шест див-ова и да желите да реагују са више колона за различите величине екрана.

Овако изгледа необликовано као шест divsу контејнеру.

Уместо да морате да додате класе за сваку од тачака прекида, можете да поставите минималну величину див-а у мрежи, а затим да аутоматски попуните веће одговарајуће оквире помоћу frсвојства величине. Морате додати својства ЦСС мреже само за родитеља, а затим ће се small-boxдив-ови аутоматски попунити.

ЦСС за контејнер је следећи:

Као што видите, можете направити једноставну мрежну мрежу која реагује на само четири реда кода. Не може бити лакше, а сав ваш садржај се може слободно кретати и мешати по потреби. У овом случају нису потребни никакви медијски упити. Одавде можете слободно прилагодити појединачне оквире у мрежи. Прилично је флексибилан за прилагодљиве распореде и величине. Поиграјте се с тим и гледајте како се кутије магично крећу.

Мрежне области

Други разлог за који бих тежио да посегнем за оквирном мрежом био је употреба за различите распореде на различитим уређајима. Можда ћете желети да се компоненте крећу, у зависности од величине екрана на којем се налазите.

Испод је пример распореда веб локација који бисте можда желели на радној површини и таблету. Промена овога је прилично једноставна. Иако се некима не свиђа структура, ви и користите АСЦИИ структуру шаблона за Грид подручја.

Рецимо да имате основни изглед странице који има заглавље, бочне траке, садржај и подножје.

Изглед странице без форматирања изгледао би овако са основном мрежом од три колоне постављене на 1fr 4fr 1fr. Кутије ће се попунити тако да одговарају њиховом додељеном простору у мрежи. Међутим, ако желите да изглед странице буде флуиднији и динамичнији као доле, можете да користите template-areas.

Да бисте добили овај жељени распоред потребно је да креирате подручја шаблона. Можете то замислити као минијатурну АСЦИИ мапу која показује где желите да оквири иду на страници.

Да бисте добили распоред радне површине, направите своју минијатурну мапу као у grid-template-areasсвојству. Свака линија садржи ред и називе за одговарајуће колоне за изглед. Можете видети да ће се одељци заглавља и подножја протезати дуж целих колона у које су постављени. Такође се бочне траке и садржај протежу у више редова, као што можете видети у подручју „мапе“. То се затим може претворити у било који изглед који вам је потребан додавањем grid-areaсвојства у одговарајуће див-ове као на крајњој десној слици. Можете им дати било шта што одговара вашем пројекту.

Да бисте могли да функционише у приказу таблета, једноставно треба да направите медијски упит и пребаците се по редоследу у областима шаблона. Лако се крећите по садржају за жељени приказ. (Имајте на уму да ово може довести до проблема на читачима екрана ако садржај није у реду, зато будите сигурни да садржај и даље чита логично.)

Закључак

Овај једноставан пост дефинитивно само огребе површину онога што можете учинити са ЦСС мрежом. Али мислим да је главна ствар коју треба одузети овоме то што се не бисте требали плашити коришћења ЦСС мреже. Заиста је прилично једноставан, моћан и лаган када се навикнете на нову синтаксу. Само напред и уживајте у „Геттинг 'Гридди Витх Ит“.

За више информација о ЦСС мрежи, топло препоручујем проверу //цссгрид.ио, коју је предавао Вес Бос. То је фантастичан туториал ЦСС Грид.

Такође, пошто имате питања, обавезно посетите ЦСС трикове на //цсс-трицкс.цом/сниппетс/цсс/цомплете-гуиде-грид/ да бисте сазнали више о мрежи.

Да бисте погледали више мог рада, посетите //тхеран.цо и сазнајте више о мени.