JS властивість CSSStyleDeclaration.columns

Загальний опис

element.style.columns - це властивість CSS, яка визначає кількість колонок, у які розбивається контент елемента. Ця властивість дозволяє створювати ефективні багатоколонкові макети на веб-сторінках.

Для використання element.style.columns у JavaScript, спочатку отримайте доступ до відповідного елемента DOM. Наприклад, якщо вам потрібно розділити div на три колонки, то встановіть значення columnCount на 3:

let element = document.getElementById('myElement');
element.style.columnCount = 3;

Використання element.style.columns особливо корисне для поділу довгого тексту на зручні колонки, що поліпшує читабельність та організацію інформації. Наприклад, для поділу параграфа на дві колонки:

let paragraph = document.getElementById('myParagraph');
paragraph.style.columns = '2';

Додавання додаткових стилів до багатоколонкового макету може покращити його вигляд. Наприклад, можна налаштувати відстань між колонками за допомогою columnGap:

element.style.columnGap = '20px';

Також, можна використовувати element.style.columns для створення різноманітних макетів, наприклад, для відображення каруселі зображень у колонках або для створення структурованого списку новин. За допомогою цієї властивості можна легко регулювати розмір та кількість колонок у вашому дизайні, що робить її потужним інструментом для створення привабливих та функціональних веб-сторінок.

Порада:

Використовуйте element.style.columns для налаштування оптимального розміру колонок, виходячи з контенту. Наприклад, якщо у вас є текст різної довжини, можна задавати конкретну ширину колонок, щоб забезпечити зручне читання.

element.style.columns = "auto 250px";

Порада:

Комбінуйте element.style.columns з анімаціями для створення плавних переходів між різною кількістю колонок. Це може зробити ваш макет більш інтерактивним та привабливим. Використовуйте CSS для анімацій:

element.style.transition = "all 0.5s ease";

А потім змінюйте колонки за допомогою JavaScript:

element.addEventListener('mouseover', () => {
    element.style.columns = "3 150px";
});
element.addEventListener('mouseout', () => {
    element.style.columns = "2 200px";
});

Порада:

Застосовуйте element.style.columns разом з медіа-запитами для гнучкого налаштування макету. Це дозволяє адаптувати кількість і ширину колонок до різних розмірів екранів без додаткового JavaScript.

@media (max-width: 600px) {
    element.style.columns = "1";
}
@media (min-width: 601px) {
    element.style.columns = "3 200px";
}

Синтаксис

element.style.columns

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

Приклади

Цей приклад дозволяє користувачу динамічно вибирати кількість колонок для відображення тексту і надає можливість експериментувати з макетом сторінки без потреби внесення змін у HTML або CSS.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/VwOOzKv">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі колонки автоматично пристосовуються: якщо ширина вікна менше 768px, контент розподіляється на одну колонку, інакше - на три. Це дозволяє підтримувати зручну читабельність на різних пристроях та екранах.

let element = document.getElementById('content');

window.addEventListener('resize', function() {
  if (window.innerWidth < 768) {
    element.style.columnCount = 1;
  } else {
    element.style.columnCount = 3;
  }
});

У цьому прикладі текст розділяється на дві колонки з відстанню між ними 30px та пунктирною лінією розділювача. Це додає візуальну цікавість та структуру до контенту, поліпшуючи його оформлення.

let paragraph = document.getElementById('myParagraph');

paragraph.style.columns = '2';
paragraph.style.columnGap = '30px';
paragraph.style.columnRule = '2px dashed #333';

JS довідник

JavaScript

Наповнення JS розділу

JS властивість CSSStyleDeclaration.columns

Загальний опис

Синтаксис

Значення

Return

Переглядачі

Приклади