Какая конструкция помогает реализовать перестройку элементов в CSS

Гриды (display: grid) и флексбоксы (display: flex) — основные инструменты для перестройки элементов.

Flexbox удобен для одномерных макетов (строка/колонка):

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

Grid подходит для сложных двумерных раскладок:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Ключевые различия:

• Flexbox выравнивает элементы по одной оси, Grid — по двум.
• auto-fit/auto-fill в Grid автоматически адаптируют колонки под контейнер.
• Для простых адаптивных сеток часто хватает Flexbox + flex-wrap.

Пример перестройки с медиазапросами:

@media (max-width: 768px) {
  .container { grid-template-columns: 1fr; }
}