Генератор CSS Grid
Що таке CSS Grid?
CSS Grid Layout — найпотужніша система макетів у CSS. Це двовимірна система, що працює зі стовпцями та рядками, на відміну від flexbox, який переважно одновимірний.
Як використовувати цей генератор CSS Grid
Задати розміри сітки
Використовуйте бічну панель для визначення стовпців, рядків та відступів.
Визначити області
Клацніть і перетягніть на попередньому перегляді для вибору прямокутних областей.
Налаштувати одиниці
Налаштуйте розміри стовпців і рядків через поля введення.
Спробувати шаблон
Виберіть з готових макетів, таких як Holy Grail, Blog або Dashboard.
Згенерувати код
Натисніть "Згенерувати код" для експорту CSS та HTML.
Посібник із синтаксису CSS Grid
Основа CSS Grid включає такі властивості, як grid-template-columns (для визначення ширини стовпців), grid-template-rows (для визначення висоти рядків) та grid-gap (для встановлення відступів). Використання дробових одиниць (fr) дозволяє створювати гнучкі макети, які адаптуються до розміру вікна перегляду.
Приклади макетів CSS Grid
Загальні приклади включають макет 'Holy Grail' (шапка, бічна панель, основний контент, підвал) та макет 'Main/Sidebar'. За допомогою grid-template-areas ви можете визначити ці області, використовуючи інтуїтивно зрозумілі назви, що робить ваш код набагато чистішим і легшим у підтриці.