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