Генератор CSS Grid — бесплатно онлайн

Собирать CSS-сетку вручную бывает долго. Считаешь дорожки, прикидываешь отступы, пишешь код, обновляешь страницу и снова правишь. Намного проще, когда сетку видно прямо во время работы. Мы добавили бесплатный инструмент, который это делает — CSS Grid Generator — прямо в браузере.

Что он умеет

Вы собираете CSS Grid визуально. Задаёте, сколько нужно колонок и строк, добавляете отступы между ними и выбираете размер каждой дорожки — fr, px, auto или своё значение. Пока вы что-то меняете, видно, как складывается раскладка, а инструмент сам пишет подходящий CSS.

Ничего не уходит с вашего устройства

Всё работает прямо в браузере. Ваша сетка и код остаются на вашем компьютере — ничего не загружается и не сохраняется на сервере. Закрыли вкладку — и всё исчезло.

Как пользоваться

1. Откройте CSS Grid Generator и задайте колонки и строки.
2. Выберите размер каждой дорожки (fr, px, auto или своё значение) и добавьте нужные отступы.
3. Скопируйте полученный CSS и вставьте его в свой проект.

Это бесплатно и без ограничений. Другие небольшие инструменты есть на странице приложений.