Перейти к содержимому
Numio

Генератор CSS Grid

Нарисуйте сетку CSS Grid визуально. Задайте размеры столбцов и строк, протяните курсор по ячейкам, чтобы создать именованные области, и скопируйте CSS, HTML или Tailwind.

Предпросмотр в реальном времени

Столбцов: 3 × строк: 3

Протяните курсор по пустым ячейкам, чтобы добавить область. Нажмите на занятую ячейку, чтобы выбрать её область.

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header header"
    "nav    main   aside"
    "footer footer footer";
  gap: 16px;
}

.header {
  grid-area: header;
}

.nav {
  grid-area: nav;
}

.main {
  grid-area: main;
}

.aside {
  grid-area: aside;
}

.footer {
  grid-area: footer;
}

Все данные остаются в вашем браузере.

Справочники по форматам

Страница инструмента обновлена: