Переосмысление контейнера v2

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

Я предложил решение, которое основано на динамическом вычислении полей на основе функции calc() и единиц vw. Решение рабочее, но не очень интуитивное из-за формулы и расчёта --vw для решения проблемы с полосой прокрутки.

Для понимания цели рекомендую ознакомиться с соответствующими постами. А я поделюсь альтернативным решением, которое мне пришло в голову. Оно даёт то же результат, но реализовано с помощью grid и более понятное на мой взгляд.

<style>
  .container {
    --container-max-width: 1440px;
    --container-min-field: 16px;
    display: grid;
    grid-template-columns:
      minmax(var(--container-min-field), 1fr)
      minmax(0, var(--container-max-width))
      minmax(var(--container-min-field), 1fr) 
    ;
  }
  
  .container > * {
    grid-column: 2 / 3;
  }
  
  .section {
    background-color: var(--section-bg-color);
  }
</style>
<section class="section container">
  <!-- контент -->
</section>

В контейнере создаётся сетка из трёх колонок. Центральная колонка предназначена для контента. Её максимальная ширина ограничена значением 1440px в функции minmax(). Эта колонка будет растягиваться и сжиматься в зависимости от ширины экрана.

Крайние колонки выполняют роль полей. Их минимальная ширина составляет 16px. Когда центральная колонка достигнет максимальной ширины, крайние колонки будут равномерно растягиваться на доступное пространство.

Правило с селектором .container > * нужно, чтобы любые дочерние элементы контейнера попадали в центральную колонку для контента. Потому что по умолчанию элементы последовательно распределяются по доступным колонкам.

Минус такого решения в том, что внутри контейнера нельзя будет определить другую сетку, например классическую 12-колоночную для контента, так как сетка уже определена. Понадобится отдельный вложенный элемент для сетки.

#css