Добавляет интерактивную демку для CSS свойства display

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>

css/display/demosaqwyan

@@ -0,0 +1 @@
+

css/display/index.md

@@ -175,3 +175,11 @@ tags:
 💡 Раньше свойство `display` нельзя было анимировать — оно дискретное, у него нет промежуточных значений между `none` и `block`. Теперь это можно обойти при помощи `transition-behavior: allow-discrete`, подробности — в статье про [`transition`](/css/transition/#cherez-display-i-transition-behavior-allow-discrete).
 
 💡 Значение по умолчанию у каждого HTML-элемента своё. Если нет уверенности — загляните в «Инструменты разработчика» в браузере.
+
+## 🎮 Интерактивная демка
+
+Попробуйте разные значения свойства `display` в этой интерактивной демке:
+
+<iframe src="demos/display-interactive/" height="600" style="width:100%; border: none; border-radius: 12px;"></iframe>
+
+Выберите значение из списка и наблюдайте, как меняется расположение блоков.