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

Такой layout часто встречается в админках и дашбордах.

Вариант с CSS Grid

CSS Grid позволяет явно описать размеры колонок.

.container {
  display: grid;
  grid-template-columns: 240px 1fr 1fr;
}

1. Первая колонка

   • Фиксированная (240px)

2. Вторая и третья

   • Делят оставшееся пространство поровну

Вариант с Flexbox

Flexbox тоже подходит, но логика менее наглядная.

.container {
  display: flex;
}

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

.right {
  flex: 1;
}

Что выбрать на практике

1. Grid

   • Чёткая сетка

   • Проще читать

   • Отлично для сложных layout’ов

2. Flexbox

   • Хорош для линейных структур

   • Чуть больше ручного контроля

Вывод

Для трёхколоночного layout’а с фиксированной и резиновыми колонками чаще выбирают CSS Grid — он проще и декларативнее.