Песочница CSS Grid

О Песочница CSS Grid

Песочница CSS Grid позволяет визуально составлять реальные сеточные макеты. Добавляйте и удаляйте столбцы и строки, чтобы формировать grid-template-columns и grid-template-rows, задавайте отступы между столбцами и строками и настраивайте все четыре свойства выравнивания — justify-items, align-items, justify-content и align-content, — а превью мгновенно отражает каждое изменение.

Размещение элементов — это то, где сетки раскрывают свою силу: добавляйте элементы, кликайте по любому в превью, чтобы выбрать его, и позиционируйте с помощью column start, column span, row start и row span. Именно так строятся боковые панели, шапки и крупные ячейки, растянутые на несколько треков, — приём, лежащий в основе почти любого реального сеточного макета.

Три пресета — holy grail, dashboard и gallery — загружают классические структуры страниц, которые можно разобрать и адаптировать. Когда макет готов, скопируйте сгенерированный CSS, содержащий полные правила контейнера сетки и позиционирование каждого элемента.

Как использовать Песочница CSS Grid

1. Добавьте или удалите столбцы и строки, чтобы задать шаблон сетки.
2. Настройте отступ между столбцами и между строками.
3. Отрегулируйте параметры выравнивания: justify-items, align-items, justify-content и align-content.
4. Добавьте элементы, кликните по одному в превью и задайте его начало и протяжённость по столбцу/строке для размещения.
5. Загрузите пресет holy grail, dashboard или gallery, чтобы изучить классический макет.
6. Скопируйте сгенерированный CSS в свою таблицу стилей.

Часто задаваемые вопросы