+ Хорошо бы, если бы был способ узнать, что ты живёшь в старые добрые времена, прежде, чем они закончатся.
+
+
+
+ Дорогой дневник. Бурундук спросил моё имя сегодня. Я представился как Джо. Эта ложь будет преследовать меня вечно.
+
+
+
+ Хороший юрист знает закон. Великий юрист знает судью.
+
+
+
+
diff --git a/recipes/container/demos/container-clamp/index.html b/recipes/container/demos/container-clamp/index.html
new file mode 100644
index 0000000000..2f4705a9b8
--- /dev/null
+++ b/recipes/container/demos/container-clamp/index.html
@@ -0,0 +1,42 @@
+
+
+Адаптивный container с использованием clamp() — Колонка с контентом по центру экрана — Дока
+
+
+
+
+
+
+
+
+
+
diff --git a/recipes/container/demos/container-media/code.html b/recipes/container/demos/container-media/code.html
new file mode 100644
index 0000000000..379e401c62
--- /dev/null
+++ b/recipes/container/demos/container-media/code.html
@@ -0,0 +1,65 @@
+
+
+
+ Адаптивный container — Колонка с контентом по центру экрана — Дока
+
+
+
+
+
+
+
+
+
+
+
+ Если орёл — я выиграла, если решка — ты проиграл.
+
+
+
+
+
+
+ Я чувствую себя как функция арктангенса, которая приближается к асимптоте.
+
+
+
+
+
diff --git a/recipes/container/demos/container-media/index.html b/recipes/container/demos/container-media/index.html
new file mode 100644
index 0000000000..ae6931558e
--- /dev/null
+++ b/recipes/container/demos/container-media/index.html
@@ -0,0 +1,49 @@
+
+
+ Адаптивный container — Колонка с контентом по центру экрана — Дока
+
+
+
+
+
+
+
+
+
+
diff --git a/recipes/container/demos/container-wrapper/code.html b/recipes/container/demos/container-wrapper/code.html
new file mode 100644
index 0000000000..cd304a66e3
--- /dev/null
+++ b/recipes/container/demos/container-wrapper/code.html
@@ -0,0 +1,54 @@
+
+
+
+ Адаптивный container c дополнительным содержимым — Колонка с контентом по центру экрана — Дока
+
+
+
+
+
+
+
+
+
+
+
Заголовок для блога
+
+ Социальные сети пожирают наши души взамен на одобрение.
+ Самые интересные цветы растут в тени.
+
+
+
+
+
diff --git a/recipes/container/demos/container-wrapper/index.html b/recipes/container/demos/container-wrapper/index.html
new file mode 100644
index 0000000000..7168f268df
--- /dev/null
+++ b/recipes/container/demos/container-wrapper/index.html
@@ -0,0 +1,49 @@
+
+
+Адаптивный container — Колонка с контентом по центру экрана — Дока
+
+
+
+
+
+
+
+
+
+
diff --git a/recipes/container/index.md b/recipes/container/index.md
new file mode 100644
index 0000000000..0e7f7acb50
--- /dev/null
+++ b/recipes/container/index.md
@@ -0,0 +1,181 @@
+---
+title: "Колонка с контентом по центру экрана"
+description: "Верстаем колонку с определённой шириной, расположенной по центру экрана."
+authors:
+ - gartonot
+related:
+ - recipes/center
+ - recipes/multicolor-text
+ - recipes/character-counter
+tags:
+ - article
+---
+
+## Задача
+
+Колонка с контентом определённой ширины по центру экрана — частый паттерн в веб-дизайне. В этом рецепте разберём как и какими способами можно это сделать. Также рассмотрим ситуацию, когда некоторые секции должны быть растянуты на весь экран.
+
+## Термины
+
+`.container` — специальный класс, который ограничивает по ширине и располагает по центру страницы блок с контентом. Стили для этого класса пишутся разработчиком и могут изменяться.
+
+Имя класса может быть любым в зависимости от договорённостей внутри конкретной команды или от привычек верстальщика.
+
+Можно использовать класс в любом нужном месте:
+
+```html
+
+
+
Привет, мир!
+
+
+```
+
+Стили для класса `container`:
+
+```css
+.container {
+ max-width: 1024px;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
+
+Значение для [`max-width`](/css/width/) может быть любым, всё зависит от дизайна и от того, насколько нужно ограничить ширину контента.
+
+В примере значение `1024px` служит для ограничения контента, больше чем `1024px` контент не будет растягиваться и выходить за эти рамки, а свойство [`margin`](/css/margin/) расположит блок с контентом по центру экрана по горизонтали.
+
+## Готовое решение
+
+Код для адаптивного сайта. При необходимости меняйте ширину и отступы под свою задачу.
+
+```css
+.container {
+ max-width: 1024px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+@media (max-width: 1024px) {
+ .container {
+ padding-left: 128px;
+ padding-right: 128px;
+ }
+}
+
+@media (max-width: 768px) {
+ .container {
+ padding-left: 64px;
+ padding-right: 64px;
+ }
+}
+
+@media (max-width: 425px) {
+ .container {
+ padding-left: 24px;
+ padding-right: 24px;
+ }
+}
+```
+
+Пример разметки:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## Разбор решения
+
+Благодаря использованию [`padding``](/css/padding/) на каждой точке перехода, контент внутри `container` не будет прижат к краям страницы, а будет иметь отступ слева и справа.
+
+
+
+При изменении ширины фрейма срабатывает медиавыражение, которое добавляет отступы слева и справа.
+
+## Готовое решение № 2
+
+Так же можно не писать несколько [медиазапросов](/css/media/), а воспользоваться функцией `clamp()` и рассчитывать нужную ширину `.container` для каждой ширины экрана.
+
+В этом примере в первую и третью секции вложен блок с классом `container`, контент в них будет ограничен по ширине и размещён по центру экрана. А во второй секции не будет вложен `.container` и контент будет растянут на всю ширину экрана.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+В стилях используем функцию `clamp()`
+
+```css
+.container {
+ width: clamp(360px, 90%, 1024px);
+ margin-left: auto;
+ margin-right: auto;
+}
+```
+
+## Разбор решения № 2
+
+Код сократился, при этом работает как нужно.
+
+Как именно функция `clamp()` рассчитывает `width`:
+
+- Первый параметр `360px` — задаёт минимальное значение ширины блока.
+- Последний параметр `1024px` — задаёт максимальное значение.
+- Средний параметр `90%` — применяется в тех случаях, когда нижний или верхний пределы не достигнуты.
+
+
+
+## Заключение
+
+Подобных утилитарных классов может быть сколько угодно в проекте. Их удобно использовать, когда нужно многократно повторить одинаковое поведение блоков. Достаточно вставить блок с нужным классом в разметку.
+
+Представим «макет» блога, где весь контент расположен в `.container`, а вот текст статей будет ещё меньше основной колонки контента. Обернём его в блок `.wrapper`:
+
+```html
+
+