Генератор CSS Grid/Flexbox

Візуальний конструктор макетів для CSS Grid і Flexbox з попереднім переглядом у реальному часі та генерацією коду

Копіює правила верстки й HTML. Кнопки обмежують ширину без медіазапитів або емуляції пристроїв. Історія до 50 записів. Кольори ілюстративні.

Конструктор Макетів

Елементи Керування

Живий Перегляд

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

CSS Код

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

.item-1 {
}

.item-2 {
}

.item-3 {
}

.item-4 {
}

.item-5 {
}

.item-6 {
}

HTML Код

<div class="container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
  <div class="item-4">Item 4</div>
  <div class="item-5">Item 5</div>
  <div class="item-6">Item 6</div>
</div>

Поради та Найкращі Практики

CSS Grid ідеальний для 2D-макетів. Використовуйте його для складних макетів сторінок, сіток карток та точного позиціонування з рядками та стовпцями.

Використовуйте адаптивні контрольні точки для створення макетів, які плавно адаптуються до різних розмірів екрана. Тестуйте макет на мобільних пристроях, планшетах та десктопах.

Почніть із шаблону макету та налаштуйте його під свої потреби. Шаблони включають поширені патерни, такі як header/sidebar/main, сітки карток та панелі навігації.

Генератор CSS Grid/Flexbox

Копіює правила верстки й HTML. Кнопки обмежують ширину без медіазапитів або емуляції пристроїв. Історія до 50 записів. Кольори ілюстративні.

Функції

  • CSS Grid
  • Flexbox
  • Копіювати CSS
  • Копіювати HTML
  • Копіює правила верстки й HTML. Кнопки обмежують ширину без медіазапитів або емуляції пристроїв. Історія до 50 записів. Кольори ілюстративні.

Як використовувати

  1. Оберіть між CSS Grid або Flexbox залежно від ваших потреб
  2. Налаштуйте властивості макету за допомогою інтуїтивної панелі керування
  3. Додайте та розташуйте елементи макету
  4. Налаштуйте стовпці сітки, рядки, проміжки та вирівнювання в реальному часі
  5. Перегляньте макет на різних контрольних точках
  6. Точне налаштування з візуальними лініями сітки
  7. Скопіюйте згенерований CSS код

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

У чому різниця між CSS Grid і Flexbox?

CSS Grid призначений для двовимірних макетів з рядками та стовпцями, ідеальний для складних макетів сторінок. Flexbox призначений для одновимірних макетів, ідеальний для панелей навігації та гнучкого розподілу вмісту.