Как создать: смешанный макет столбцов

Учимся создавать сетку смешанного макета столбцов с помощью CSS.

Учимся создавать макет столбцов, который может изменяться между четырьмя, двумя и полными столбцами в зависимости от ширины экрана.

Измените размер окна браузера, чтобы увидеть эффекты респонсивности:

Пробуйте лично

Как создать смешанный макет столбцов

Шаг 1 - Добавьте HTML:

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

Шаг 2 - Добавьте CSS:

В этом примере мы создадим макет с четырьмя столбцами, который при ширине экрана менее 900 пикселей преобразуется в два столбца. Однако при ширине экрана менее 600 пикселей столбцы будут堆积, а не располагаться параллельно.

/* Создание четырех одинаковых по ширине столбцов, которые плавают вместе */
.column {
  float: left;
  width: 25%;
}
/* Удаление плавающих элементов */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* Респонсивная разметка - преобразование макета в два столбца вместо четырех */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* Респонсивная разметка - столбцы должны堆积, а не располагаться параллельно */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Пробуйте лично

Соответствующие страницы

Учебник:CSS макет сайта

Учебник:CSS Responsive web design