5 страхотни CSS Grid генератори
Няма съмнение, че CSS Grid е невероятно мощен и вълнуващ инструмент за уеб дизайнери. Той отвори цял куп нови възможности по отношение на оформлението. Обаче да се запознаете със синтаксиса може да бъде най-малкото предизвикателство. Ако се мъчите, CSS Grid генераторите са тук, за да ви помогнат. С тях можете да изградите визуално оформление на мрежата и те ще изплюят правилния код (или за да опростите още повече нещата, използвайте отгоре уеб конструктор ).
Появиха се много такива инструменти и те наистина са полезни, особено ако не сте експерт по синтаксиса. Тук ще разгледаме най-добрите варианти. Искате ли да научите повече? Вижте нашите изчерпателно ръководство за CSS Grid , вижте нашето ръководство за уеб хостинг услуги, за да сте сигурни, че имате правилния за възможностите на вашия сайт и ако имате много мултимедийни файлове, не забравяйте да ги архивирате в съхранение в облака .
01. Оформление! CSS Grid генератор
Започва списъка ни с този CSS Grid генератор от Layoutit! С този инструмент вие избирате интерактивно вашите мрежови области, използвате бутони за добавяне на колони и редове, назовавате своите мрежови области. Можете да изтеглите кода или да запазите дизайна като постоянна връзка за споделяне.
02. cssgr.id
cssgr.id предлага подобни функции на предишния инструмент, но различен стил на интерфейс (кой предпочитате вероятно ще се свежда до личните вкусове). Полезна функция с този инструмент е, че можете да добавите текст на Lorem Ipsum. Това е дело на базирания в Лондон разработчик Дан Нетъртън.
03. CSS Grid Template Builder
Тази демонстрация на CodePen от творческия разработчик Anthony Dugois е доста уникална опция в нашия списък. Тя ви позволява да изградите оформлението на мрежата предимно като използвате низ, който редактирате и след това пуснете във вашия CSS като стойност за мрежови шаблони-области Имот.
04. CSS Gridish
Този проект от екипа на IBM взема спецификации за проектиране на мрежата на вашия продукт и изгражда няколко ресурси, които вашият екип да използва. Тези ресурси включват файл на Sketch с монтажни дъски и настройки на мрежа / оформление, CSS / SCSS код, използващ CSS Grid с резервен CSS flexbox, както и разширение за Chrome.
05. CSS Grid Layout Generator
Това е сравнително нов инструмент от Дмитрий Биков. Започвате със създаването на „песни“ (колони и редове), след това добавяте елементи, след което експортирате кода. Отнема малко да свикнете - едноминутната скринкаст по-горе е полезна, за да започнете.
Тази статия първоначално е публикувана в нето , най-продаваното списание в света за уеб дизайнери и разработчици. Купува брой 316 или Абонирай се .
Прочетете още:
