Макет в 3 колонки

  alexei 18/11/2022 - 10:04

Здесь вы узнаете, как сделать 3-х колоночный макет сетки при помощи CSS.


Колонка 1

Некоторый текст..

Колонка 2

Некоторый текст..

Колонка 3

Некоторый текст..


Как сделать макет в 3 колонки

Шаг 1) Добавляем HTML:


<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Шаг 2) Добавляем CSS:

Здесь мы создаем три одинаковые колонки:


.column {
  float: left;
  width: 33.33%;
}

/* Сбрасываем обтекание после колонок */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Здесь мы создаем три колонки разной ширины:


.column {
  float: left;
}

.left, .right {
  width: 25%;
}

.middle {
  width: 50%;
}

Здесь мы добавляем колонкам адаптивность:


/* Адаптивный макет – когда ширина экрана меньше 600px, колонки
 будут отображаться друг над другом, а не рядом друг с другом */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}