Об этом инструменте
CSS Grid Generator — бесплатный браузерный инструмент, который превращает три простых элемента управления — число столбцов, число строк и зазор — в готовую к вставке CSS grid-раскладку. Задайте значения, наблюдайте за перерисовкой живого превью и скопируйте сгенерированное правило.
Столбцы и строки — целые числа от 1 до 12 (по умолчанию 3 и 2), а зазор — ползунок от 0 до 40 пикселей (по умолчанию 10). Оба измерения записываются через repeat() и единицу 1fr, поэтому каждая дорожка делит доступное пространство поровну. Превью заполняет каждую ячейку пронумерованным цветным блоком, чтобы структуру дорожек было видно с одного взгляда, а вывод — это простое правило .grid с display: grid, grid-template-columns, grid-template-rows и gap. Один клик копирует его в буфер обмена.
Всё работает целиком в вашем браузере — без загрузок, аккаунтов и отслеживания — и после загрузки страницы продолжает работать офлайн.