1 files changed, 30 insertions, 0 deletions
diff --git a/files/uk/web/css/layout_mode/index.html b/files/uk/web/css/layout_mode/index.html
new file mode 100644
index 0000000000..5794b4c397
--- /dev/null
+++ b/files/uk/web/css/layout_mode/index.html
@@ -0,0 +1,30 @@
+---
+title: Схема компонування
+slug: Web/CSS/Схема_компонування
+tags:
+  - CSS
+  - Компонування
+  - Розмітка
+  - Розташування
+translation_of: Web/CSS/Layout_mode
+---
+<div><strong>Схема компонування</strong> (layout mode) в <a href="/en-US/docs/Web/CSS">CSS</a> являє собою алгоритм, який визначає розташування та розміри елементів залежно від того, як вони взаємодіють із сусідніми та батьківськими елементами. Існує декілька таких схем:</div>
+
+<ul>
+ <li><em>Блокове компонування</em> (block), призначене для розмітки документів. Ця схема має відповідні засоби, як-от можливість зробити елементи <em><a href="/uk/docs/Web/CSS/float">рухомими</a></em> (плаваючими) або скомпонувати їх в <em><a href="/uk/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">кілька стовпчиків</a></em>.</li>
+ <li><em>Рядкове компонування</em> (inline), призначене насамперед для розмітки тексту.</li>
+ <li><em>Табличне компонування</em>, призначене для розмітки таблицею.</li>
+ <li><em><a href="/uk/docs/Web/CSS/position#Види_розташування">Компонування розміщенням</a></em> (positioned), призначене для застосування до елементів, що не надто взаємодіють з іншими.</li>
+ <li><em><a href="/uk/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Компонування flexbox</a></em>, призначене для створення складної розмітки сторінок, які можна плавно масштабувати.</li>
+ <li><em><a href="/uk/docs/Web/CSS/CSS_Grid_Layout">Компонування сіткою</a></em>, призначене для розташування елементів відносно нерухомої сітки. {{experimental_inline}}</li>
+</ul>
+
+<div class="note">
+<p><strong>Зауваження:</strong> Не всі <a href="/en-US/docs/Web/CSS/Reference">властивості CSS</a> застосовні до всіх <em>схем компонування</em>. Більшість із них вживаються разом з однією-двома схемами і жодним чином не діють, якщо відповідний елемент компонується за іншою схемою.</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>