Конвертер цветов
Преобразуйте HEX, RGB и HSL с прозрачностью, смотрите образец цвета и копируйте готовые значения CSS.
Генератор CSS Grid
Настройте фиксированную или адаптивную сетку в живом предпросмотре и получите CSS и HTML.
Об инструменте
Проверьте сетку карточек при разной ширине перед переносом в страницу.
Как пользоваться
Выберите число столбцов или автоматическое размещение по минимальной ширине. Настройте строки, интервалы, выравнивание и элементы. Меняйте ширину предпросмотра, затем экспортируйте CSS и HTML отдельно.
Ширина влияет только на предпросмотр. Фиксированная сетка: 1–12 строк и столбцов, интервалы 0–80 px, до 48 элементов. Дополните код своим содержимым и оформлением.
Частые вопросы
Как менять число колонок вместе с шириной?
Выберите автоматическое заполнение и минимальную ширину колонки. Вывод использует auto-fit и minmax. Ширина самого предпросмотра не экспортируется.
Почему строк больше, чем указано в настройках?
Настройка задаёт явные строки сетки, а не максимальное количество элементов. У фиксированной сетки из 3 столбцов и 2 строк первоначально 6 ячеек; седьмой элемент создаёт неявную строку. Уменьшите количество элементов, если в предпросмотре нужны ровно эти шесть ячеек.
Связанные инструменты
Откроется в новой вкладке
Комментарии
0