<header>
  <h2 class="title">element.style.columnSpan</h2>
  <p class="description">Керує охопленням колонок елементом в багатоколонковому макеті.</p>
</header>
<main>
  <div class="controls">
    <button id="spanAll">Зайняти всі колонки</button>
    <button id="spanNone">Звільнити колонки</button>
    <button id="increaseColumns">Збільшити кількість колонок</button>
    <button id="decreaseColumns">Зменшити кількість колонок</button>
  </div>
  <div class="result" id="multiColumn">
    <p id="columnSpanElement">Цей текст буде змінювати своє охоплення колонок при натисканні кнопок.</p>
    <p>Додатковий текст для демонстрації багатоколонкового макету. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <p>Додатковий текст для демонстрації багатоколонкового макету. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</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;
}

.controls {
  margin-bottom: 15px;
}

.controls button {
  margin-right: 10px;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.controls button:hover {
  background-color: #0056b3;
}

.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-count: 2;
  column-gap: 20px;
}

document.getElementById('spanAll').addEventListener('click', function() {
  document.getElementById('columnSpanElement').style.columnSpan = 'all';
});

document.getElementById('spanNone').addEventListener('click', function() {
  document.getElementById('columnSpanElement').style.columnSpan = 'none';
});

document.getElementById('increaseColumns').addEventListener('click', function() {
  const resultElement = document.getElementById('multiColumn');
  const currentColumns = parseInt(window.getComputedStyle(resultElement).getPropertyValue('column-count'));
  resultElement.style.columnCount = currentColumns + 1;
});

document.getElementById('decreaseColumns').addEventListener('click', function() {
  const resultElement = document.getElementById('multiColumn');
  const currentColumns = parseInt(window.getComputedStyle(resultElement).getPropertyValue('column-count'));
  if (currentColumns > 1) {
    resultElement.style.columnCount = currentColumns - 1;
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.