Коли ви використовуєте стовпці CSS? PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai.

Коли ви використовуєте стовпці CSS?

Це не риторика: я дійсно зацікавлений у пошуку чудових варіантів використання CSS-макетів із кількома стовпцями.

Відповідь здається простою. Використовуйте стовпці, коли ви хочете розділити будь-який вміст на стовпці, чи не так? Ось загалом приклади, які ви знайдете в статтях, які показують, як працюють макети з кількома стовпцями CSS, включно з нашими власними Альманах:

Правильно. Але чи це реальний випадок використання? Мммм можливо. Якщо текст відносно короткий, можливо, це приємний штрих. Ось як я продав це собі під час редизайну свого веб-сайту кілька років тому. Сьогодні це не так, але ось як це виглядало тоді:

Коли ви використовуєте стовпці CSS?

Але вся розширена стаття розбита на колонки? Мені це подобається в газетах, але я вагаюся прокручувати веб-сторінку вниз, щоб прочитати одну колонку, лише щоб прокрутити вгору, щоб зробити це знову.

Я припускаю, що ми можемо використовувати його, щоб розмістити два елементи пліч-о-пліч, але flexbox набагато більше підходить для цього. Крім того, обмеження не дозволяє нам вибирати стовпці для індивідуального розміру. Стовпчики повинні бути однакової ширини.

Стовпці є єдиним методом компонування CSS фрагменти вміст. (Тобто, якщо ми не рахуємо Регіони CSS… що з ними взагалі сталося?!) Отже, якщо ви хочете розбити абзац на колонки, це вже можливо без додаткових обгорток.

Коли ще може знадобитися розділити безперервний блок вмісту на стовпці? Я пам’ятаю, що мені потрібно було це зробити, коли у мене був великий старий невпорядкований список предметів. Мені подобається, як списки можуть полегшити сканування вмісту, але довгі списки можуть зробити одну сторону сторінки надзвичайно важкою. Скажімо, наприклад, що ми перераховували всі теги публікацій для CSS-Tricks в алфавітних групах. Для цього чудово працює макет із кількома стовпцями:

Спробуйте змінити ширину вікна перегляду. Визначено три стовпці, але кількість змінюватиметься залежно від обсягу доступного простору. Мені подобається все це чуйне добро без медіа-запитів!

Я працював над демонстрацією для :left псевдоклас і потягнувся columns оскільки це чудовий спосіб фрагментувати речі для друку демонстрацій. Отже, я припускаю, що є інший варіант використання. І під час створення демонстрації я зрозумів, що макет із кількома стовпцями можна використати для створення сітки кладки елементів, як-от галерея зображень:

Але що ще? Чи ми обмежені короткими абзацами, довгими списками та вільними сітками?

Часова мітка:

Більше від CSS-хитрощі