From 91fb2a4c784c9d8b4fb89fa060c975bf72d519f4 Mon Sep 17 00:00:00 2001
From: aqwyan <aqwyan@mail.ru>
Date: Wed, 20 May 2026 11:02:50 +0300
Subject: [PATCH 1/6] Create demosaqwyan

---
 css/display/demosaqwyan | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 css/display/demosaqwyan

diff --git a/css/display/demosaqwyan b/css/display/demosaqwyan
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/css/display/demosaqwyan
@@ -0,0 +1 @@
+

From 31552fc9766f38c9155fff02b8365f8f4c1c3f0e Mon Sep 17 00:00:00 2001
From: aqwyan <aqwyan@mail.ru>
Date: Wed, 20 May 2026 11:09:35 +0300
Subject: [PATCH 2/6] Add files via upload

---
 css/display/demos/display-interactive/index.html | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 css/display/demos/display-interactive/index.html

diff --git a/css/display/demos/display-interactive/index.html b/css/display/demos/display-interactive/index.html
new file mode 100644
index 0000000000..e69de29bb2

From a319f51ac3967a021c891c21dd08618f7ad433bb Mon Sep 17 00:00:00 2001
From: aqwyan <aqwyan@mail.ru>
Date: Wed, 20 May 2026 11:12:28 +0300
Subject: [PATCH 3/6] Update index.md

---
 css/display/index.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/css/display/index.md b/css/display/index.md
index 15c10b0c82..97ff56636f 100644
--- a/css/display/index.md
+++ b/css/display/index.md
@@ -134,3 +134,11 @@ tags:
 💡 Свойство `display` нельзя анимировать 😔
 
 💡 Значение по умолчанию у каждого HTML-элемента своё. Если нет уверенности — загляните в «Инструменты разработчика» в браузере.
+
+## 🎮 Интерактивная демка
+
+Попробуйте разные значения свойства `display` в этой интерактивной демке:
+
+<iframe src="demos/display-interactive/" height="600" style="width:100%; border: none; border-radius: 12px;"></iframe>
+
+Выберите значение из списка и наблюдайте, как меняется расположение блоков.

From 3c55699870b37437603ca07275375ac85c36de62 Mon Sep 17 00:00:00 2001
From: aqwyan <aqwyan@mail.ru>
Date: Wed, 20 May 2026 11:26:48 +0300
Subject: [PATCH 4/6] Update index.html

---
 .../demos/display-interactive/index.html      | 71 +++++++++++++++++++
 1 file changed, 71 insertions(+)

diff --git a/css/display/demos/display-interactive/index.html b/css/display/demos/display-interactive/index.html
index e69de29bb2..a72845ab64 100644
--- a/css/display/demos/display-interactive/index.html
+++ b/css/display/demos/display-interactive/index.html
@@ -0,0 +1,71 @@
+---
+title: "Интерактивная демка: значения CSS-свойства display"
+description: "Попробуйте разные значения display и посмотрите, как меняется поведение элементов"
+---
+
+<div style="background: #f5f5f5; padding: 20px; border-radius: 12px; margin: 20px 0;">
+    <style>
+        .demo-controls { margin-bottom: 20px; }
+        .demo-controls select { padding: 8px 12px; font-size: 16px; border-radius: 8px; border: 1px solid #ccc; }
+        .demo-boxes { background: #fff; padding: 20px; border-radius: 12px; border: 2px dashed #ccc; transition: all 0.3s; }
+        .demo-box { background: #3498db; color: white; text-align: center; padding: 15px; margin: 8px; border-radius: 8px; }
+        .demo-box:nth-child(2) { background: #2ecc71; }
+        .demo-box:nth-child(3) { background: #e74c3c; }
+        .demo-info { margin-top: 15px; padding: 10px; background: #e8f4fd; border-radius: 8px; font-size: 14px; }
+    </style>
+    
+    <div class="demo-controls">
+        <label>🎮 Выберите значение <code>display</code>: </label>
+        <select id="demoDisplaySelect">
+            <option value="block">block</option>
+            <option value="inline">inline</option>
+            <option value="inline-block">inline-block</option>
+            <option value="flex">flex</option>
+            <option value="grid">grid</option>
+        </select>
+    </div>
+    
+    <div class="demo-boxes" id="demoDisplayBoxes">
+        <div class="demo-box">Блок 1</div>
+        <div class="demo-box">Блок 2</div>
+        <div class="demo-box">Блок 3</div>
+        <div class="demo-box">Блок 4</div>
+    </div>
+    
+    <div class="demo-info" id="demoDisplayInfo">
+        Текущее значение: <code>block</code>
+    </div>
+    
+    <script>
+        const select = document.getElementById('demoDisplaySelect');
+        const container = document.getElementById('demoDisplayBoxes');
+        const info = document.getElementById('demoDisplayInfo');
+        
+        function updateDisplay() {
+            const value = select.value;
+            container.style.display = value;
+            info.innerHTML = `Текущее значение: <code>${value}</code><br><br>`;
+            
+            if (value === 'flex') {
+                container.style.gap = '8px';
+                container.style.flexWrap = 'wrap';
+                info.innerHTML += 'Включён режим <strong>flex</strong> — элементы выстраиваются в гибкую строку.';
+            } else if (value === 'grid') {
+                container.style.display = 'grid';
+                container.style.gridTemplateColumns = 'repeat(auto-fit, minmax(150px, 1fr))';
+                container.style.gap = '12px';
+                info.innerHTML += 'Включён режим <strong>grid</strong> — элементы располагаются в адаптивной сетке.';
+            } else {
+                container.style.gap = '';
+                container.style.flexWrap = '';
+                container.style.gridTemplateColumns = '';
+                if (value === 'inline') info.innerHTML += 'Режим <strong>inline</strong> — элементы располагаются в строку.';
+                else if (value === 'inline-block') info.innerHTML += ' Режим <strong>inline-block</strong> — как inline, но с размерами.';
+                else info.innerHTML += 'Режим <strong>block</strong> — каждый элемент с новой строки.';
+            }
+        }
+        
+        select.addEventListener('change', updateDisplay);
+        updateDisplay();
+    </script>
+</div>

From 6bc49bb937aedc8965215806be5b955c61663f20 Mon Sep 17 00:00:00 2001
From: Alena Batitskaia <batickaya.a@gmail.com>
Date: Sun, 30 Aug 2026 02:44:17 +0100
Subject: [PATCH 5/6] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D0=B2=D0=B5=D1=82=D0=BA=D1=83=20=D0=B4=D0=BB?=
 =?UTF-8?q?=D1=8F=20=D0=BF=D1=80=D0=BE=D0=B3=D0=BE=D0=BD=D0=B0=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=BE=D0=B2=D0=B5=D1=80=D0=BE=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit


From f7e198a6663ef13100a78e89f44a6dd0174807ca Mon Sep 17 00:00:00 2001
From: Alena Batitskaia <batickaya.a@gmail.com>
Date: Sun, 30 Aug 2026 03:45:30 +0100
Subject: [PATCH 6/6] =?UTF-8?q?=D0=A7=D0=B8=D0=BD=D0=B8=D1=82=20=D0=BF?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B5=D0=BD=D0=BE=D1=81=D1=8B=20=D1=81=D1=82=D1=80?=
 =?UTF-8?q?=D0=BE=D0=BA=20=D0=B8=20=D0=BF=D1=80=D0=BE=D0=B1=D0=B5=D0=BB?=
 =?UTF-8?q?=D1=8B=20=D0=B2=20=D0=BA=D0=BE=D0=BD=D1=86=D0=B5=20=D1=81=D1=82?=
 =?UTF-8?q?=D1=80=D0=BE=D0=BA=20=D0=B2=20=D0=B4=D0=B5=D0=BC=D0=BA=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demos/display-interactive/index.html      | 142 +++++++++---------
 1 file changed, 71 insertions(+), 71 deletions(-)

diff --git a/css/display/demos/display-interactive/index.html b/css/display/demos/display-interactive/index.html
index a72845ab64..c918832dc6 100644
--- a/css/display/demos/display-interactive/index.html
+++ b/css/display/demos/display-interactive/index.html
@@ -1,71 +1,71 @@
----
-title: "Интерактивная демка: значения CSS-свойства display"
-description: "Попробуйте разные значения display и посмотрите, как меняется поведение элементов"
----
-
-<div style="background: #f5f5f5; padding: 20px; border-radius: 12px; margin: 20px 0;">
-    <style>
-        .demo-controls { margin-bottom: 20px; }
-        .demo-controls select { padding: 8px 12px; font-size: 16px; border-radius: 8px; border: 1px solid #ccc; }
-        .demo-boxes { background: #fff; padding: 20px; border-radius: 12px; border: 2px dashed #ccc; transition: all 0.3s; }
-        .demo-box { background: #3498db; color: white; text-align: center; padding: 15px; margin: 8px; border-radius: 8px; }
-        .demo-box:nth-child(2) { background: #2ecc71; }
-        .demo-box:nth-child(3) { background: #e74c3c; }
-        .demo-info { margin-top: 15px; padding: 10px; background: #e8f4fd; border-radius: 8px; font-size: 14px; }
-    </style>
-    
-    <div class="demo-controls">
-        <label>🎮 Выберите значение <code>display</code>: </label>
-        <select id="demoDisplaySelect">
-            <option value="block">block</option>
-            <option value="inline">inline</option>
-            <option value="inline-block">inline-block</option>
-            <option value="flex">flex</option>
-            <option value="grid">grid</option>
-        </select>
-    </div>
-    
-    <div class="demo-boxes" id="demoDisplayBoxes">
-        <div class="demo-box">Блок 1</div>
-        <div class="demo-box">Блок 2</div>
-        <div class="demo-box">Блок 3</div>
-        <div class="demo-box">Блок 4</div>
-    </div>
-    
-    <div class="demo-info" id="demoDisplayInfo">
-        Текущее значение: <code>block</code>
-    </div>
-    
-    <script>
-        const select = document.getElementById('demoDisplaySelect');
-        const container = document.getElementById('demoDisplayBoxes');
-        const info = document.getElementById('demoDisplayInfo');
-        
-        function updateDisplay() {
-            const value = select.value;
-            container.style.display = value;
-            info.innerHTML = `Текущее значение: <code>${value}</code><br><br>`;
-            
-            if (value === 'flex') {
-                container.style.gap = '8px';
-                container.style.flexWrap = 'wrap';
-                info.innerHTML += 'Включён режим <strong>flex</strong> — элементы выстраиваются в гибкую строку.';
-            } else if (value === 'grid') {
-                container.style.display = 'grid';
-                container.style.gridTemplateColumns = 'repeat(auto-fit, minmax(150px, 1fr))';
-                container.style.gap = '12px';
-                info.innerHTML += 'Включён режим <strong>grid</strong> — элементы располагаются в адаптивной сетке.';
-            } else {
-                container.style.gap = '';
-                container.style.flexWrap = '';
-                container.style.gridTemplateColumns = '';
-                if (value === 'inline') info.innerHTML += 'Режим <strong>inline</strong> — элементы располагаются в строку.';
-                else if (value === 'inline-block') info.innerHTML += ' Режим <strong>inline-block</strong> — как inline, но с размерами.';
-                else info.innerHTML += 'Режим <strong>block</strong> — каждый элемент с новой строки.';
-            }
-        }
-        
-        select.addEventListener('change', updateDisplay);
-        updateDisplay();
-    </script>
-</div>
+---
+title: "Интерактивная демка: значения CSS-свойства display"
+description: "Попробуйте разные значения display и посмотрите, как меняется поведение элементов"
+---
+
+<div style="background: #f5f5f5; padding: 20px; border-radius: 12px; margin: 20px 0;">
+    <style>
+        .demo-controls { margin-bottom: 20px; }
+        .demo-controls select { padding: 8px 12px; font-size: 16px; border-radius: 8px; border: 1px solid #ccc; }
+        .demo-boxes { background: #fff; padding: 20px; border-radius: 12px; border: 2px dashed #ccc; transition: all 0.3s; }
+        .demo-box { background: #3498db; color: white; text-align: center; padding: 15px; margin: 8px; border-radius: 8px; }
+        .demo-box:nth-child(2) { background: #2ecc71; }
+        .demo-box:nth-child(3) { background: #e74c3c; }
+        .demo-info { margin-top: 15px; padding: 10px; background: #e8f4fd; border-radius: 8px; font-size: 14px; }
+    </style>
+
+    <div class="demo-controls">
+        <label>🎮 Выберите значение <code>display</code>: </label>
+        <select id="demoDisplaySelect">
+            <option value="block">block</option>
+            <option value="inline">inline</option>
+            <option value="inline-block">inline-block</option>
+            <option value="flex">flex</option>
+            <option value="grid">grid</option>
+        </select>
+    </div>
+
+    <div class="demo-boxes" id="demoDisplayBoxes">
+        <div class="demo-box">Блок 1</div>
+        <div class="demo-box">Блок 2</div>
+        <div class="demo-box">Блок 3</div>
+        <div class="demo-box">Блок 4</div>
+    </div>
+
+    <div class="demo-info" id="demoDisplayInfo">
+        Текущее значение: <code>block</code>
+    </div>
+
+    <script>
+        const select = document.getElementById('demoDisplaySelect');
+        const container = document.getElementById('demoDisplayBoxes');
+        const info = document.getElementById('demoDisplayInfo');
+
+        function updateDisplay() {
+            const value = select.value;
+            container.style.display = value;
+            info.innerHTML = `Текущее значение: <code>${value}</code><br><br>`;
+
+            if (value === 'flex') {
+                container.style.gap = '8px';
+                container.style.flexWrap = 'wrap';
+                info.innerHTML += 'Включён режим <strong>flex</strong> — элементы выстраиваются в гибкую строку.';
+            } else if (value === 'grid') {
+                container.style.display = 'grid';
+                container.style.gridTemplateColumns = 'repeat(auto-fit, minmax(150px, 1fr))';
+                container.style.gap = '12px';
+                info.innerHTML += 'Включён режим <strong>grid</strong> — элементы располагаются в адаптивной сетке.';
+            } else {
+                container.style.gap = '';
+                container.style.flexWrap = '';
+                container.style.gridTemplateColumns = '';
+                if (value === 'inline') info.innerHTML += 'Режим <strong>inline</strong> — элементы располагаются в строку.';
+                else if (value === 'inline-block') info.innerHTML += ' Режим <strong>inline-block</strong> — как inline, но с размерами.';
+                else info.innerHTML += 'Режим <strong>block</strong> — каждый элемент с новой строки.';
+            }
+        }
+
+        select.addEventListener('change', updateDisplay);
+        updateDisplay();
+    </script>
+</div>