Контейнер

Для выравнивания содержимого на странице

Часто в макетах необходимо чтобы один из столбцов выходил за границы контейнера (до края страницы).

<div class="container-grid">
    <p>Этот контейнер займет обычную максимальную ширину</p>
</div>

<div class="container-grid">
    <p class="container-grid__fw">
        Этот контейнер займет всю ширину экрана
    </p>
</div>

<div class="container-grid">
    <div class="container-grid__fw-right">
      <p>Не выйдет за контейнер</p>
      <p>Этот контейнер займет всю ширину экрана только справа</p>  
    </div>
</div>

<div class="container-grid">
    <div class="container-grid__fw-left">
      <p>Этот контейнер займет всю ширину экрана только слева</p>  
      <p>Не выйдет за контейнер</p>
    </div>
</div>

При создании контейнера c блоками, которые должны выходить за ширину обязательно необходимо создавать два потомка

Параметры

--maxWidth - максимальная ширина контейнера

--padding-inline - определяет минимальную ширину отступа от экрана (px или em)

--fw-column-size - задается размер столбца, который растягивается на весь экран (в единицах, напр. 50 - что означает, что блок займет 50% контейнера + растянится за контейнер на выбранную сторону (задается классом))

--wrap-column-size - определяет размер колонки при котором будет перемещение потомков из плоскости "строка" в плоскость "столбец". Это необходимо для мобильный версий.

.container-grid {
   // justify-items: center - не дает содержимому расстягиваться на всю допустимую ширину
  --padding-inline: 16px;
  --fw-column-size: 60;
  --wrap-column-size: 300px; // Этот размер подобран таким образом, чтобы при брейкпоинте 576 и соотнешении колонок 50-50 был переход с двух колонок в ряд в две колонки в столбец

  display: grid;
  grid-template-columns:
   [full-start]
   0px
   
   [left-start]
   minmax(var(--padding-inline), 1fr)

   [right-start]
   0px
   
   [content-start] 
   min(100% - (var(--padding-inline) * 2), var(--maxWidth))
   [content-end]

   0px
   [left-end]
    
   minmax(var(--padding-inline), 1fr) 
   [right-end]

   0px
   [full-end] ;

   & > * {
      grid-column: content;
   }

   & > &__fw {
      grid-column: full;
   }

   & > &__fw-left, 
   & > &__fw-right {
      display: flex;
      flex-wrap: wrap;

   }

   & > &__fw-left {
      grid-column-start: 1;
   }

   & > &__fw-right {
      grid-column-end: none;
   }
   
   & > &__fw-left > *:last-child,
   & > &__fw-right > *:first-child {
      min-width: var(--wrap-column-size);
      flex-grow: 1;
      flex-shrink: 1;
   }

   & > &__fw-left > *:last-child,
   & > &__fw-right > *:first-child {
      flex-basis: calc(min((100% - var(--padding-inline)), var(--maxWidth)) * (1 - var(--fw-column-size)/100));
   } 

   & > &__fw-left > *:first-child, 
   & > &__fw-right > *:last-child {
      flex-grow: 1000000;
      min-width: calc((var(--wrap-column-size) / (1 - var(--fw-column-size)/100)) - var(--wrap-column-size) + var(--padding-inline));
   }
}