5 страхотни CSS Grid генератори

Няма съмнение, че CSS Grid е невероятно мощен и вълнуващ инструмент за уеб дизайнери. Той отвори цял куп нови възможности по отношение на оформлението. Обаче да се запознаете със синтаксиса може да бъде най-малкото предизвикателство. Ако се мъчите, CSS Grid генераторите са тук, за да ви помогнат. С тях можете да изградите визуално оформление на мрежата и те ще изплюят правилния код (или за да опростите още повече нещата, използвайте отгоре уеб конструктор ).

Появиха се много такива инструменти и те наистина са полезни, особено ако не сте експерт по синтаксиса. Тук ще разгледаме най-добрите варианти. Искате ли да научите повече? Вижте нашите изчерпателно ръководство за CSS Grid , вижте нашето ръководство за уеб хостинг услуги, за да сте сигурни, че имате правилния за възможностите на вашия сайт и ако имате много мултимедийни файлове, не забравяйте да ги архивирате в съхранение в облака .

01. Оформление! CSS Grid генератор

Оформление! CSS Grid генератор



лего Хари Потър и чашата с огън

Започва списъка ни с този CSS Grid генератор от Layoutit! С този инструмент вие избирате интерактивно вашите мрежови области, използвате бутони за добавяне на колони и редове, назовавате своите мрежови области. Можете да изтеглите кода или да запазите дизайна като постоянна връзка за споделяне.

02. cssgr.id

cssgr.id

cssgr.id предлага подобни функции на предишния инструмент, но различен стил на интерфейс (кой предпочитате вероятно ще се свежда до личните вкусове). Полезна функция с този инструмент е, че можете да добавите текст на Lorem Ipsum. Това е дело на базирания в Лондон разработчик Дан Нетъртън.

03. CSS Grid Template Builder

CSS Grid Template Builder

Тази демонстрация на CodePen от творческия разработчик Anthony Dugois е доста уникална опция в нашия списък. Тя ви позволява да изградите оформлението на мрежата предимно като използвате низ, който редактирате и след това пуснете във вашия CSS като стойност за мрежови шаблони-области Имот.

как да добавите снимка към рецензия на Amazon

04. CSS Gridish

CSS Gridish

Този проект от екипа на IBM взема спецификации за проектиране на мрежата на вашия продукт и изгражда няколко ресурси, които вашият екип да използва. Тези ресурси включват файл на Sketch с монтажни дъски и настройки на мрежа / оформление, CSS / SCSS код, използващ CSS Grid с резервен CSS flexbox, както и разширение за Chrome.

как да рисувам облаци в масло

05. CSS Grid Layout Generator

Това е сравнително нов инструмент от Дмитрий Биков. Започвате със създаването на „песни“ (колони и редове), след това добавяте елементи, след което експортирате кода. Отнема малко да свикнете - едноминутната скринкаст по-горе е полезна, за да започнете.

Генерирайте Ню Йорк

Generate, наградената конференция за уеб дизайнери, се завръща в Ню Йорк на 24-25 април! Щракнете върху изображението, за да резервирате билети

Тази статия първоначално е публикувана в нето , най-продаваното списание в света за уеб дизайнери и разработчици. Купува брой 316 или Абонирай се .

Прочетете още: