CSS многостолбцовый макет для начинающих

Чтение очень длинных строк текста может быть проблематичным для некоторых людей. Им придется больше сосредоточиться на том, чтобы не пропустить строку вместо самого текста. Эта проблема легко решается с помощью нескольких столбцов для размещения содержимого. Несколько столбцов вездесущи в печатных СМИ. Функции CSS Multi-column Layout Module позволяют нам воссоздать тот же самый эффект нескольких столбцов на веб-сайтах.

Одна вещь, которая затрудняет использование нескольких столбцов при разработке веб-страниц, — это невозможность контролировать размер документов. В этом уроке я научу вас создавать адаптивные многостолбцовые макеты, которые хорошо смотрятся на экранах разных размеров. Мы начнем с основ, а затем перейдем к более сложным концепциям.

Поддержка браузера

Браузерная поддержка многостолбцовой разметки отлично подходит, если вы готовы использовать префиксы. Эта функция поддерживается 95,32% браузеров по всему миру на основе статистики от Могу ли я использовать . Некоторые браузеры, такие как IE10 +, Edge и Opera Mini, полностью поддерживают макеты с несколькими столбцами. Другим, таким как Firefox и Chrome, нужны префиксы.

Доступен более старый полифильм, который вы пробуете, если вам требуется поддержка старых браузеров (обычно это означает IE9 и ниже). Конечно, если браузер не поддерживает функции нескольких столбцов, макет изящно ухудшается до макета одного столбца. Так что в этом случае полифил не может быть лучшим вариантом.

Модуль многостолбцовой разметки CSS обладает рядом различных свойств. В следующих разделах я расскажу обо всех по одному.

Количество столбцов и ширина столбцов

Свойство column-count Вы можете установить его на auto Если установлено значение autocolumn-width Если задано положительное число, все столбцы имеют одинаковую ширину.

Свойство column-width Это не должно строго соблюдаться. Например, столбцы могут быть уже, если недостаточно свободного места. Это свойство также может быть установлено как для auto Если установлено значение auto, ширина будет определяться свойством column-count Доступное пространство будет разделено между всеми столбцами одинаково.

В качестве альтернативы, эти два значения могут быть установлены одновременно, используя свойство сокращенных columns Синтаксис для свойства columns

 .example {
  columns: <'column-width'> || <'column-count'>
}

Ниже приведены несколько примеров использования этого свойства с интерпретацией в комментарии рядом с каждым примером:

 .example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

Как видите, определение первого columns В основном, если целому числу не назначено ни одного элемента, оно анализируется как число column-count

Вот демонстрация CodePen, чтобы продемонстрировать функции, которые обсуждались до сих пор

Если вы измените размер окна, вы заметите несколько вещей:

• Свойство column-count Единственное, что меняется — это ширина столбцов.
• Свойство column-width Количество столбцов настраивается таким образом, чтобы ширина столбца превышала указанное значение. Он также может отрегулировать ширину всех столбцов до меньшего значения, если места недостаточно.
• Свойство columnscolumn-count Он продолжает регулировать ширину таким образом, чтобы число column-countcolumn-width

Разрыв столбца и правило столбца

Свойство column-gap Вы можете установить его в normal Это может быть ноль, но не отрицательный. Когда вы устанавливаете его в normal

Свойство column-rule Это похоже на использование свойств border-leftborder-right Это свойство соответствует синтаксису:

 .example {
  column-rule: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
}

 .responsive-height {
  height: 250px;
}

@media (max-width: 1040px) {
  .responsive-height {
    height: auto;
  }
}

 @media (min-width: 800px) {
  .long-columns {
    columns: 3 200px;
  }
}