Чтобы создать макет веб-сайта с помощью CSS, вы можете использовать несколько методов. Вот некоторые часто используемые методы:

1. Floats: свойство float позволяет располагать элементы рядом. Вы можете перемещать элементы влево или вправо и создавать макеты из нескольких столбцов.

.container {
  width: 100%;
}
.column {
  float: left;
  width: 50%;
}

2. Flexbox: Flexbox — это мощная модель макета, которая обеспечивает гибкие способы расположения элементов внутри контейнера. Он позволяет создавать адаптивные и динамичные макеты.

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1 1 200px;
}

3. CSS Grid: CSS Grid Layout — это двухмерная система макетов, обеспечивающая точный контроль над размещением и размером элементов. Это особенно полезно для создания дизайна на основе сетки.

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

4. Bootstrap: Bootstrap — это популярная платформа CSS, которая предоставляет готовые компоненты и адаптивную сетку. Это упрощает процесс создания макетов веб-сайтов.

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

5. CSS-фреймворки. Помимо Bootstrap, существует множество других CSS-фреймворков, таких как Foundation, Bulma и Tailwind CSS. Эти платформы предоставляют готовые к использованию компоненты и системы макетов для ускорения разработки веб-сайтов.