От автора: несмотря на то, что он предшествовал Grid and Flexbox, Multi-column Layout в CSS представляет собой — по крайней мере, для меня — еще более радикальный отход от того, что мы обычно делаем, и как думаем о макете CSS. Разделение только одного элемента на его многоколоночное представление содержимого кажется странным, даже еретическим.
Установка многостолбцового контекста означает, что контент (поток) должен перемещаться по столбцам в горизонтальном направлении. Это вызывает одну из двух проблем, в зависимости от того, установлена ли высота элемента.
Без заданной высоты нет ограничений на высоту столбцов. Это приведет к вертикальному переполнению и необходимости прокручивать страницу вверх и вниз, чтобы прочитать каждый последующий столбец. Многие могут найти это трудным.
При заданной высоте столбцы должны выводиться в линейном (горизонтальном) направлении, создавая горизонтальное переполнение. Корректно установить overflow: auto.
.columns { height: 25vh; /* ↓ столбцы определяются по ширине */ columns: 30ch; overflow: auto;
}Тем не менее, несмотря на растущую популярность прокручиваемых меню и других подобных шаблонов, использующих горизонтальную прокрутку, это все еще нетрадиционная парадигма взаимодействия — а нетрадиционные шаблоны могут быть неправильно поняты пользователями. Конечно, есть способы увеличить воспринимаемую доступность — возможно, добавив некоторые пользовательские стили к полосе прокрутки (-webkit-scrollbar) или предоставив тени, зависящие от переполнения. Но этого может быть недостаточно.
Столбцы, зависящие от количества
Одна вещь, с которой я экспериментировал, — это применение нескольких столбцов в зависимости от количества контента. Допустим, у меня есть список маркеров, и давайте предположим, что каждый пункт маркера, вероятно, будет относительно коротким; не более чем предложение. Нет смысла делить список на столбцы, когда есть только несколько пунктов. Но общая высота списка сокращается (и вероятность того, что читатель сможет увидеть весь список без прокрутки, увеличивается), когда длинный список делится на два.
В следующем примере список разделен на два столбца, в которых имеется 5 или более элементов списка.
ol, ul { columns: 2; column-gap: 1rem;
} li { column-span: all;
} li:nth-last-child(n+5), li:nth-last-child(n+5) ~ * { column-span: none;
}По умолчанию для column-span установлено значение all, означающее, что каждый элемент списка игнорирует указание двух столбцов. Затем запрос количества (последний блок объявления) сбрасывается column-span на none при 5 или более элементах списка. Несмотря на вводящее в заблуждение значение none, это означает, что элементы списка будут занимать один из двух столбцов.
По ссылке приведена демо-версия. Попробуйте открыть инструменты разработчика и удалить несколько элементов списка. Обратите внимание, что это поведение в настоящее время недоступно в Firefox. Существует обсуждаемая ошибка для реализации column-span. Спасибо Эрику Уоллесу за то, что он нашел ее.
Переполнение в направлении блока
Как предложила Рэйчел Эндрю, было бы полезно иметь возможность контролировать как линейное переполнения, так и переполнение в направлении блока. Поддержка переполнения в направлении блока будет означать, что мы могли бы взять на себя контроль как над шириной столбцов, так и над высотой. Пока выбранная высота не выше текущего окна просмотра, повторяющаяся проблема вертикальной прокрутки, описанная выше, исчезает.
Считывание столбцов больше не требует вертикальной прокрутки.
Способ реализации и раскрытия направления переполнения блока все еще остается неясным, поэтому, если у вас есть какие-либо идеи, вы можете высказать их.
Моя первоначальная мысль заключалась в том , что свойство column-height должно поддерживаться наряду с column-width и column-count. В этом случае сокращенное свойство columns должно принимать высоту в качестве третьего параметра.
В настоящее время columns принимает column-width и column-count в любом порядке — предположительно, потому что синтаксический анализ может определить, какое значение к чему относится. Это становится более сложным с двумя параметрами длины, поэтому может потребоваться установить ожидаемый порядок для этих свойств. Если этот ожидаемый порядок будет width-before-height, то следующие значения будут считаться действительными (где 30ch представляет ширину, а 25vh — высоту):
.columns { columns: 30ch 25vh;
} .columns { columns: 30ch 25vh 3;
} .columns { columns: 30ch 3 25vh;
} .columns { columns: 3 30ch 25vh;
}Стоит отметить, что «жесткое кодирование» для column-count вряд ли будет полезно в большинстве случаев, поскольку столбцы и строки теперь динамически распределяются в зависимости от доступного пространства. Также стоит отметить, что column-width задает идеальную ширину, а не фиксированную, во многом как flex-basis. Это позволяет устранить наложения и пробелы.
Свойство column-gap вводит пространство между столбцами. С введением поддержки column-height, row-gap должно поддерживаться также. Хотя вы, вероятно , более знакомы со свойствами специфичными для CSS Grid — grid-gap, grid-row-gap и grid-column-gap, Firefox уже поддерживает общие свойства gap, row-gap и column-gap для Flexbox. Намерение состоит в том, чтобы нормализовать работу gap для модулей Grid, Flexbox и Multi-column.
Автор: Heydon
Источник: https://every-layout.dev
Редакция: Команда webformyself.