Майданчик CSS Grid

Про Майданчик CSS Grid

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

Розміщення елементів — це те, де grid розкриває свою силу: додавайте елементи, клацайте на потрібному в попередньому перегляді, щоб вибрати його, і позиціонуйте за допомогою column start, column span, row start і row span. Саме так створюються бічні панелі, шапки та великі функціональні блоки, що охоплюють кілька доріжок — техніка, що лежить в основі майже кожного реального grid-макета.

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

Як використовувати Майданчик CSS Grid

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

Часті запитання