Какие знаешь свойства Grid

Grid — мощный инструмент для создания сложных макетов. Основные свойства:

Контейнер:

• display: grid – активация грид-разметки
• grid-template-columns/rows – задаёт размеры колонок/строк (например, 1fr 2fr)
• gap – отступы между элементами (row-gap, column-gap)

Элементы:

• grid-column/row – позиционирование (например, grid-column: 1 / 3)
• grid-area – имя области для размещения
• justify/align-self – выравнивание элемента внутри ячейки

Пример:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.item {
  grid-column: span 2;
}