Как сделать layout из трёх колонок с фиксированной левой и резиновыми правыми?

Question

Проще всего использовать CSS Grid: задать фиксированную ширину первой колонки и fr для остальных. Grid сразу описывает структуру и не требует сложных расчётов. Альтернатива — Flexbox, где первая колонка фиксированная, а остальные растягиваются через flex: 1. Grid обычно читается проще и масштабируется лучше.

YeaHub · Accepted Answer

Такой layout часто встречается в админках и дашбордах.Вариант с CSS GridCSS Grid позволяет явно описать размеры колонок..container {
  display: grid;
  grid-template-columns: 240px 1fr 1fr;
}
Первая колонкаФиксированная (240px)Вторая и третьяДелят оставшееся пространство поровнуВариант с FlexboxFlexbox тоже подходит, но логика менее наглядная..container {
  display: flex;
}

.left {
  width: 240px;
  flex-shrink: 0;
}

.right {
  flex: 1;
}
Что выбрать на практикеGridЧёткая сеткаПроще читатьОтлично для сложных layout’овFlexboxХорош для линейных структурЧуть больше ручного контроляВыводДля трёхколоночного layout’а с фиксированной и резиновыми колонками чаще выбирают CSS Grid — он проще и декларативнее.