1 files changed, 84 insertions, 0 deletions
diff --git a/files/ru/learn/css/css_layout/index.html b/files/ru/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..a4fcfa8ac5
--- /dev/null
+++ b/files/ru/learn/css/css_layout/index.html
@@ -0,0 +1,84 @@
+---
+title: CSS layout
+slug: Learn/CSS/CSS_layout
+tags:
+  - Beginner
+  - CSS
+  - Floating
+  - Grids
+  - Guide
+  - Landing
+  - Layout
+  - Learn
+  - Module
+  - Multiple column
+  - NeedsTranslation
+  - Positioning
+  - TopicStub
+  - flexbox
+  - float
+  - Верстка
+  - Сетка
+  - позиционирование
+  - разметка страницы
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как иcпользовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.</p>
+
+<h2 id="Необходимые_условия">Необходимые условия</h2>
+
+<p>Перед изучением этого раздела вы должны:</p>
+
+<ol>
+ <li>Иметь общее представление об HTML, как указано в разделе <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступление в HTML</a>.</li>
+ <li>Ориентироваться в основах CSS, как указано в разделе <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a>.</li>
+ <li>Понимать, как <a href="/en-US/docs/Learn/CSS/Styling_boxes">стилизовать блочные элементы</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если вы работаете на компьютере/планшете/других устройствах, где нет возможности создать ваш собственный файл, вы можете попробовать (большую часть) примеры кода в онлайн-программах для написания кода  <a href="http://jsbin.com/">JSBin</a> и <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Руководство">Руководство</h2>
+
+<p>Эти разделы содержат инструкции по основным инструментам и методам верстки, доступным в CSS. На последнем уроке у Вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS вёрстку</a></dt>
+ <dd>В этом разделе будут описаны некоторые возможности CSS вёрстки, которых мы уже касались в предыдущих модулях - различные значения {{cssxref("display")}}  — и представлены некоторые концепции, которые мы рассмотрим в этом модуле.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></dt>
+ <dd>Элементы на веб-страницах размещаются в соответствии с нормальным потоком - пока мы не сделаем что-либо, чтобы это изменить. Этот раздел объясняет основы нормального потока как фундамент для изучения влияния на него.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
+ <dd><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> - это метод одномерной верстки для размещения элементов в строках или столбцах. Элементы растягиваются, чтобы заполнить дополнительное пространство и сжимаются, чтобы поместиться в меньшее пространство. Данный раздел объясняет фундаментальные принципы.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt>
+ <dd>CSS Grid Layout - это двумерная система верстки для веб. Она позволяет вам размещать контент в строках и столбцах и имеет множество возможностей, которые упрощают построение сложных макетов. Этот раздел даст вам все, что нужно знать для начала работы с макетом страницы.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt>
+ <dd>Изначально созданное для плавающих изображений внутри текстовых блоков, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания мульти-колоночной верстки веб-страниц. С появлением Flexbox и Grid оно вернулось к первоначальному предназначению, как объясняется в этом разделе.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></dt>
+ <dd>Позиционирование позволяет вам брать элементы из нормального потока и изменять их поведение, например, заставляет находиться друг под другом или всегда оставаться в одном и том же месте внутри окна просмотра браузера. В этом разделе объясняются различные значения {{cssxref("position")}} и способы их применения.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Мульти-колоночная верстка</a></dt>
+ <dd>Спецификация мульти-колоночной верстки дает вам способ размещения содержимого  в столбцах по аналогии с версткой газет.  Этот раздел объясняет, как использовать эту возможность.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы верстки</a></dt>
+ <dd>Grid-системы - это очень распространенная возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей верстки. Вы представляете свою верстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим, как работают эти старые методы, чтобы вы понимали, как они использовались, если столкнётесь со старыми проектами.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старыми браузерами</a></dt>
+ <dd>
+ <p>В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы верстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приорететны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.</p>
+ </dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Фундаментальное понятие верстки</a></dt>
+ <dd>Оценка ваших знаний различных методов верстки посредством вёрстки веб-страницы.</dd>
+</dl>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Практические примеры позиционирования</a></dt>
+ <dd>Этот раздел показывает, как построить пример из реальной жизни, чтобы проиллюстрировать, что вы можете сделать при помощи позиционирования.</dd>
+</dl>