Что такое layout

Layout (макет) — это процесс расположения элементов на странице с учётом их размеров, позиционирования и взаимодействия друг с другом.

Основные подходы:

1. Блочная модель (Box Model) — основа CSS: margin, border, padding, content.
2. Flexbox — одномерное выравнивание (горизонтально или вертикально):
   css

   Копировать

   .container {
     display: flex;
     justify-content: center;
     align-items: center;
   }

3. Grid — двумерное выравнивание (сетка):
   css

   Копировать

   .container {
     display: grid;
     grid-template-columns: 1fr 1fr;
   }

4. Позиционирование (absolute, relative, fixed, sticky).

Нюансы:

• Влияние box-sizing: border-box на расчёты размеров.
• Переполнение (overflow).
• Адаптивность через медиазапросы (@media).