Столбец

В вёрстке слово «столбец» означает три разные вещи, и путаница между ними мешает выбрать правильный инструмент. Колонка таблицы — часть табличных данных: прайс-листа, сравнения тарифов, характеристик. Столбец сетки — дорожка раскладки, в которую ставят карточки, сайдбар и основной текст. Колонки многоколоночного текста — способ разлить длинный текст, как в газете.

Три вида и как с ними работать

• Таблица. Столбца как отдельного контейнера в разметке нет: ячейки лежат в строках. Стилизовать колонку целиком можно через colgroup и col, но к ним применяются только фон, рамка, ширина и visibility. Ячейку на несколько колонок растягивает атрибут colspan, подробнее — в статье про ячейку таблицы.
• CSS Grid. Колонки задаются свойством grid-template-columns, их число может подстраиваться под ширину экрана без медиазапросов. Подробно — в статье про CSS Grid.
• Многоколоночный текст. Свойства columns, column-gap и column-rule делят поток текста на колонки, и браузер сам решает, где перенести. Это многоколоночная вёрстка.

Пример

/* Каталог: столько колонок, сколько поместится, но не уже 220px */
.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

/* Таблица характеристик: первая колонка узкая и серая */
.specs col:first-child { width: 35%; background: #f5f5f5; }

/* Список городов доставки в три колонки */
.cities { columns: 3 180px; column-gap: 32px; }
.cities li { break-inside: avoid; }

Как выбрать

Если у данных есть заголовки и их сравнивают по строкам и колонкам — нужна настоящая таблица: так её поймут и экранный диктор, и поисковый робот. Если нужно расставить блоки интерфейса — сетка. Если надо компактно показать длинный список однородных коротких пунктов — многоколоночный текст. Читать длинные абзацы в нескольких колонках на экране неудобно: приходится прокручивать вверх-вниз, поэтому для статей этот приём почти не используют. Горизонтальная пара столбца — строка сетки.