Макет страницы

Макет в веб-дизайне определяет расположение блоков и элементов на странице, их размеры и пропорции.

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

  • Блочная верстка с помощью display: block и inline-block.
  • Flexbox: удобный способ создания гибких горизонтальных и вертикальных макетов.
  • CSS Grid: мощный инструмент для создания сложных сеточных макетов.

Пример Flexbox макета

div.container {
  display: flex;
  gap: 20px;
}

div.sidebar {
  flex: 1;
  background: #fafafa;
  padding: 20px;
}

div.content {
  flex: 3;
  background: #fff;
  padding: 20px;
}

В этом примере content занимает большую часть ширины, а sidebar меньше и расположена слева или справа.

Рекомендации

  • Используйте семантические блоки для структуры страницы.
  • Для адаптивных макетов применяйте медиа-запросы.
  • Flexbox и Grid позволяют легко менять расположение блоков при изменении ширины экрана.