Лучшие онлайн-инструменты для создания CSS сетки (CSS Grid)

Вот пять онлайн-инструментов для генерации 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.
– И др. функции.

На этом всё! Красивых Вам сайтов!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *