Вот пять онлайн-инструментов для генерации CSS-сетки с отличными визуальными интерфейсами:
Скачать исходники для статьи можно ниже
Разработчикам веб-сайтов часто приходится применять CSS-сетки на завершающем этапе вёрстки дизайнов. Начав работу с программирования CSS-сетки, можно лишь усложнить себе задачу. Создавать их можно, используя онлайн-генераторы сетчатой CSS-разметки.
1. CSS Grid Generator by Sarah Drasner
Сайт: “cssgrid-generator.netlify.com/”
CSS Grid Generator by Sarah Drasner – это новый отличный генератор CSS сетки, созданный Сарой Драснер. Интерфейс супер простой, и вы можете собрать CSS сетку очень быстро.
Этот инструмент позволяет вам:
– установите номера и др. единицы измерений для строк и столбцов;
– перетаскивать в ячейки див блоки.
На момент написания статьи генератор CSS Grid Generator by Sarah Drasner позволяет создавать простые реализации макетов на основе CSS-сетки и пока что этот проект не является всесторонним обзором возможностей CSS Grid.
Однако, поскольку это совершенно новый инструмент с открытым исходным кодом, он все еще находится в активной разработке. Сложные функции, такие как minmax() пока не реализованы, но возможно они появятся позже.
2. LayoutIt by Leniolabs
Сайт: “grid.layoutit.com/”
Генератор LayoutIt имеет интуитивно понятый интерфейс с большим количеством функции, чем предыдущий генератор CSS сетки. Например, он позволяет использовать the grid-gap свойство в px, em и %, а также grid-template-columns и grid-template-rows с помощью minmax(). Однако этого недостаточно для обеспечения оперативности реагирования, поэтому вам все равно потребуется настроить значения с помощью запросов мультимедиа.
Кроме того, я не нашел способа установить grid-gap свойство, поэтому вам придется сделать это вручную, если вы хотите, чтобы между строками и столбцами было немного белого пространства.
3. Griddy by Drew Minns
Сайт: “griddy.io/”
С помощью Griddy вы можете занумеровать столбцы и строки с помощью fr,px, % и auto единиц измерения, но нет никакой minmax() функции. Вы можете добавить пробелы в столбцы и строки с помощью px и %, а также задать justify-items и align-items свойства для выравнивания элементов в сетке. Для быстрого реагирования вам понадобятся запросы мультимедиа.
4. Vue Grid Generator by Masaya Kazama
Сайт: “vue-grid-generator.netlify.com/”
Vue Grid Generator имеет несколько удобных предустановленных макетов с настраиваемыми параметрами, которые вы можете легко изменить, добавляя и удаляя элементы и регулируя размеры.
Этот инструмент позволяет построить CSS сетку, используя grid-template-areas и связанные grid-area свойства. Кроме того, если вам нужны запросы мультимедиа, чтобы сделать страницу отзывчивой, вы можете установить grid-gap свойства вручную.
5. CSS Grid Layout Generator by Dmitrii Bykov
Сайт: “css-grid-layout-generator.pw/”
CSS Grid Layout Generator by Dmitrii Bykov является полнофункциональным генератором CSS сетки от Дмитрия Быкова.
Чтобы оценить весь функционал данного онлайн инструмента можно посмотреть демонстрационное видео:
“youtube.com/watch?v=9J5VqpKPSNk”
Инструмент предоставляет множество настроек, как для контейнера сетки, так и для элементов сетки. Доступные функции включают следующее:
– Вы можете установить сетку inline.
– Вы можете установить нумерацию столбцов и строк с помощью fr,px,em, rem, vw, vh, % min-content, max-content и даже использовать minmax() с repeat(), auto-fit и auto-fill. Это означает, что ваш макет может быть отзывчивым из коробки.
– Все блоки могут использовать grid-gap свойства.
– Вы можете выровнять содержимое своей страницы, установив настройки justify-items, align-items, justify-content, align-content.
– И др. функции.
На этом всё! Красивых Вам сайтов!