<header>
  <h2 class="title">element.style.columnCount</h2>
  <p class="description">Встановлює або змінює кількість колонок для багатоколонкового макету елемента.</p>
</header>
<main>
  <div class="result">
    <div id="textElement">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
    </div>
    <div>
      <label>
        <input type="radio" name="columnCount" value="1"> 1 колонка
      </label>
      <label>
        <input type="radio" name="columnCount" value="2"> 2 колонки
      </label>
      <label>
        <input type="radio" name="columnCount" value="3" checked> 3 колонки
      </label>
    </div>
    <button id="addColumnButton">Додати колонку</button>
    <button id="removeColumnButton">Видалити колонку</button>
  </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);
}

#textElement {
  margin-bottom: 15px;
  font-size: 18px;
  column-count: 3;
}

button {
  margin-right: 10px;
}
let textElement = document.getElementById('textElement');
let addColumnButton = document.getElementById('addColumnButton');
let removeColumnButton = document.getElementById('removeColumnButton');
let radioButtons = document.querySelectorAll('input[name="columnCount"]');

radioButtons.forEach(function(radio) {
  radio.addEventListener('change', function() {
    textElement.style.columnCount = this.value;
  });
});

addColumnButton.addEventListener('click', function() {
  let currentCount = getComputedStyle(textElement).columnCount;
  textElement.style.columnCount = parseInt(currentCount) + 1;
});

removeColumnButton.addEventListener('click', function() {
  let currentCount = getComputedStyle(textElement).columnCount;
  if (currentCount > 1) {
    textElement.style.columnCount = parseInt(currentCount) - 1;
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.