> For the complete documentation index, see [llms.txt](https://danila-korotkov.gitbook.io/front-end-patterns/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://danila-korotkov.gitbook.io/front-end-patterns/shablony/struktury/konteiner.md).

# Контейнер

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

<pre class="language-html"><code class="lang-html"><strong>&#x3C;div class="container-grid">
</strong><strong>    &#x3C;p>Этот контейнер займет обычную максимальную ширину&#x3C;/p>
</strong><strong>&#x3C;/div>
</strong><strong>
</strong>&#x3C;div class="container-grid">
    &#x3C;p class="container-grid__fw">
        Этот контейнер займет всю ширину экрана
    &#x3C;/p>
&#x3C;/div>

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

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

{% hint style="info" %}
При создании контейнера c блоками, которые должны выходить за ширину **обязательно** необходимо создавать **два** потомка
{% endhint %}

### Параметры

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

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

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

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

```scss
.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));
   }
}
```

{% embed url="<https://codepen.io/ccpwldlu-the-selector/pen/XWwJoBr>" %}