Колонки

Колонки на FLEXBOX CSS

flex

HTML

<div class="columns-box">

  <div class="columns">
    <div class="columns__item">flex</div>
    <div class="columns__item">flex</div>
  </div>

  <div class="columns">
    <div class="columns__item">flex</div>
    <div class="columns__item">flex</div>
    <div class="columns__item">flex</div>
  </div>

  <div class="columns">
    <div class="columns__item">flex</div>
    <div class="columns__item">flex</div>
    <div class="columns__item">flex</div>
    <div class="columns__item">flex</div>
  </div>

</div>

CSS

.columns {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 40px;
}

.columns__item {
  width: 100%;
  height: 160px;
  flex-grow: 1;
  background-color: #e1e6f0;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 18px;
  color: #141313;
  font-weight: 300;
}

@media (max-width: 700px) {

  .columns { 
    flex-direction: column;
  }

  .columns__item {
    font-size: 16px;
  }

}

Колонки на GRID CSS

grid

HTML

<div class="columns-box">

  <div class="grid-columns grid-columns--two">
    <div class="grid-columns__item">grid</div>
    <div class="grid-columns__item">grid</div>
  </div>

  <div class="grid-columns grid-columns--three">
    <div class="grid-columns__item">grid</div>
    <div class="grid-columns__item">grid</div>
    <div class="grid-columns__item">grid</div>
  </div>

  <div class="grid-columns grid-columns--four">
    <div class="grid-columns__item">grid</div>
    <div class="grid-columns__item">grid</div>
    <div class="grid-columns__item">grid</div>
    <div class="grid-columns__item">grid</div>
  </div>

</div>

CSS

.grid-columns {
  display: grid;
  gap: 20px;
  margin-bottom: 40px;
}

.grid-columns--two {
  grid-template-columns: repeat(2, 1fr);
}

.grid-columns--three {
  grid-template-columns: repeat(3, 1fr);
}

.grid-columns--four {
  grid-template-columns: repeat(4, 1fr);
}

.grid-columns__item {
  height: 160px;
  background-color: #e2e0ec;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 18px;
  color: #141313;
  font-weight: 300;
}

@media (max-width: 700px) {

  .grid-columns--two,
  .grid-columns--three,
  .grid-columns--four {
    grid-template-columns: 1fr;
  }

  .grid-columns__item {
    font-size: 16px;
  }

}

Примеры кода для создания колонок для сайта на HTML и CSS

Готовый пример верстки колонок для сайта с помощью HTML и CSS. Такой вариант часто используют для размещения карточек, блоков с текстом, преимуществ или изображений. Код построен на основе flexbox CSS и grid CSS, что позволяет удобно управлять выравниванием и отступами.

Колонки автоматически выстраиваются в ряд на широком экране и аккуратно переходят в вертикальный список на мобильных устройствах. Такой подход обеспечивает адаптивность без использования дополнительных библиотек или сложных сеток.

Особенности:

используется flexbox или grid для гибкой верстки колонок
простой и чистый код для легкой интеграции в любой проект
масштабируется под любое количество элементов