<header>
  <h2 class="title">element.style.columnWidth</h2>
  <p class="description">Метод встановлює ширину колонок у багатоколонковому макеті</p>
</header>
<main>
  <div class="controls">
    <label for="columnWidth">Ширина колонок (наприклад, 200px або 50%): </label>
    <input type="text" id="columnWidth" value="200px">
    <button id="applyWidth">Застосувати ширину</button>
    <br><br>
    <label for="columnCount">Кількість колонок: </label>
    <input type="number" id="columnCount" value="3" min="1">
    <button id="applyCount">Застосувати кількість</button>
    <br><br>
    <label for="columnGap">Відстань між колонками (наприклад, 10px): </label>
    <input type="text" id="columnGap" value="10px">
    <button id="applyGap">Застосувати відстань</button>
  </div>
  <div class="result" id="result">
    <p>Це приклад тексту, який буде розбитий на кілька колонок. Ви можете змінювати ширину колонок, їх кількість та відстань між ними за допомогою форми вище. Спробуйте ввести різні значення та спостерігати за змінами!</p>
    <p>Додатковий текст для демонстрації. Текст може бути довільним та включати різноманітний контент для кращого візуального ефекту. Наприклад, це можуть бути новини, статті або інша важлива інформація.</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  column-width: 200px;
  column-gap: 10px;
  column-count: 3;
}

.controls {
  margin-bottom: 15px;
}

document.getElementById('applyWidth').addEventListener('click', function() {
  let width = document.getElementById('columnWidth').value;
  document.getElementById('result').style.columnWidth = width;
});

document.getElementById('applyCount').addEventListener('click', function() {
  let count = document.getElementById('columnCount').value;
  document.getElementById('result').style.columnCount = count;
});

document.getElementById('applyGap').addEventListener('click', function() {
  let gap = document.getElementById('columnGap').value;
  document.getElementById('result').style.columnGap = gap;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.