Css колонки от ширины экрана

Руководство по созданию удобных и отзывчивых CSS-колонок

От автора: С помощью CSS-колонок вы можете создать макет, добавив немного разметки, наподобие страницы печатного издания, который сможет адаптироваться вне фиксированных размеров рабочей области. Браузер, поддерживающий данную технологию, произведет необходимые вычисления, чтобы разбить содержимое на составные части и аккуратно распределить его по колонкам. Если вы уже работаете над созданием резинового макета, тогда колонки будут перестраиваться автоматически. В процессе создания макета, при грамотном подборе свойств, CSS-колонки могут стать интересным решением, которое будет удобным и отзывчивым, а также не будет нарушать принципа отказоустойчивости (graceful degradation).

Где объявлять колонки

Вы можете объявить колонки на уровне любого блочного элемента. Колонки могут быть применены к одиночному элементу или к нескольким элементам, находящимся внутри родительского элемента.

С левой стороны, на картинке внизу, показано применение правил по созданию CSS-колонки для второго абзаца, чтобы разбить содержимое только этого абзаца на колонки. А с правой стороны показано применение правил для целого контейнера с несколькими элементами, что позволяет создать многоколоночный макет.

Как объявлять колонки

Существует три разных способа объявления колонок:

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Объявить свойство column-count.

Объявить свойство column-width.

Объявить оба свойства (рекомендуется).

Давайте рассмотрим данные способы объявления колонок.

1. Объявление свойства column-count

Используйте свойство column-count, чтобы указать количество колонок.

Количество колонок остается неизменным даже когда ширина окна браузера изменяется (см. ниже gif-изображение)

2. Объявление свойства column-width

Используйте свойство column-width, чтобы указать ширину колонок.

Указанное вами значение не будет являться абсолютной величиной, а скорее будет означать минимальную ширину. Если значение для свойства column-width будет указано, то браузер определит, какое минимальное количество колонок с заданной шириной может поместиться в доступном пространстве. Браузер, производя вычисления, будет также учитывать межстолбцовый промежуток, т.е. пустое пространство между колонками (об этом чуть позже). Затем браузер растянет колонки таким образом, чтобы они равномерно помещались в заданной ширине контейнера.

Например, если вы внимательно посмотрите на абзац из нижеприведенного демо-примера, то обнаружите, что ширина колонки на самом деле больше 150px (а именно такое значение было указано для свойства column-width).

Как только браузер не сможет уместить хотя бы две колонки с указанным значением для свойства column-width, ни одна колонка больше не будет отображаться, и макет снова станет одноколоночным.

На следующем gif-изображении показано, что происходит с колонками, когда окно браузера сужается. В отличие от свойства column-count это свойство уже по умолчанию является отзывчивым.

3. Объявление двух свойств (рекомендуется)

Используйте вместе свойства column-count и column-width, чтобы лучше управлять CSS-колонками. Вы можете объявлять каждое свойство по отдельности или использовать сокращенную запись columns.

Когда объявляются оба свойства, column-count означает максимальное число колонок, а column-width – минимальную ширину этих колонок.

На следующем gif-изображении показано, какой получается результат при совместном использовании свойств column-count и column-width, если окно браузера сужается.

Настройка колонок

Есть еще несколько свойств для осуществления дальнейшей настройки CSS-колонок.

Чтобы отрегулировать межстолбцовый промежуток или расстояние между колонками, объявите свойство column-gap. Для большинства браузеров, значением по умолчанию для свойства column-gap является 1em. Вы можете указать любое другое значение при условии, что оно больше или равно 0.

Браузер выполнит необходимые вычисления, чтобы равномерно расположить и отрегулировать колонки, несмотря на большее расстояние между ними.

На следующем gif-изображении показано, как браузер создает колонки и сбрасывает расстояние между ними, когда окно браузера сужается.

Для того чтобы добавить вертикальную линию между каждой колонкой, нужно объявить свойство column-rule. Это свойство является сокращенной записью для свойств column-rule-width, column-rule-style, column-rule-color. В данной сокращенной записи используется такой же порядок следования свойств, как и для сокращенной записи border.

Как и в случае со свойством column-gap, вертикальная линия исчезнет, как только окно браузера станет слишком узким (см. ниже gif-изображение).

Для того чтобы временно прервать поток текста, разбитого на колонки, нужно применить к дочернему элементу свойство column-span. В настоящее время, браузер Firefox не поддерживает данное свойство (но вы можете проголосовать за его поддержку на сайте Bugzilla).

На следующем изображении показан заголовок, который указывает на начало новой главы в рассказе, но он расположен внутри потока текста, разбитого на колонки.

Чтобы вырвать заголовок из данного потока, нужно назначить ему свойство column-span: all. Данная запись позволит временно прервать поток текста, который разбивается на колонки. Это даст возможность создать отступ у заголовка и перенести его на новую строку, после чего, начиная со следующего элемента, текст продолжит разбиваться на колонки.

Чтобы изменить то, как колонки наполняются контентом, нужно объявить свойство column-fill. В данный момент это свойство поддерживается только браузером Firefox.

Когда для элемента, который разбит на колонки, указывается высота, браузер Firefox ведет себя не так, как остальные браузеры. Firefox будет автоматически создавать одинаковые колонки, равномерно распределяя в них контент, в то время как другие браузеры будут просто последовательно заполнять колонки контентом.

На следующем изображении показано, как ведет себя Firefox по сравнению с другими браузерами, когда для элемента, разбитого на колонки, указана высота.

Вы можете управлять поведением браузера Firefox, используя запись column-fill: auto. В этом случае Firefox будет заполнять колонки последовательно (см. демо-пример).

Поскольку необходимо указывать высоту для использования свойства column-fill в Firefox, «резиновость» макета будет нарушена из-за фиксированной высоты. Контент будет вынужден растягиваться по горизонтали, т.к. возможности сделать это по вертикали у него просто нет (см. ниже gif-изображение). В этом случае, чтобы решить вопрос с высотой, можно использовать медиа-запрос (об этом чуть позже).

Остальные браузеры не поддерживают свойство column-fill и будут последовательно заполнять колонки контентом, когда для элемента, разбиваемого на колонки, будет задана высота. Стоит заметить, что когда для элемента, разбиваемого на колонки, задается высота, то вне зависимости от браузера или использования свойства column-fill, макет перестанет быть резиновым из-за фиксированных ограничений по высоте.

Ограничения

Использование колонок может быть прекрасным способом подачи контента до тех пор, пока контент остается читабельным. Многоколоночный макет может стать неудобным для чтения, если контент будет растягиваться по горизонтали, вызывая появление полосы прокрутки, или колонки будут длиннее области окна просмотра.

Контент выходит за пределы области просмотра по горизонтали

Как видно из раздела, где говорится о свойстве column-fill, если для элемента, разбиваемого на колонки, задана высота, то сам элемент будет растягиваться по горизонтали, чтобы уместить контент. Выход контента за пределы области просмотра приведет к тому, что вид макета будет испорчен, и пользователь будет просматривать содержимое, двигаясь в другом направлении.

Возможное решение: создать медиа-запрос min-width, чтобы в нем прописать правило для параметра высоты.

В следующем демо-примере я уменьшила окно браузера, чтобы определить, в какой момент колонки начинают выходить за пределы области просмотра, и записала данное значение. Далее я создала медиа-запрос min-width, используя записанное мной значение, и уже в нем прописала правило для параметра высоты.

Источник

Делаем адаптивный HTML, добавляя одну строку в CSS

В этой статье я расскажу вам, как использовать CSS Grid для создания супер классной сетки изображений, которая варьирует количество столбцов в зависимости от ширины экрана.

И самое классное: адаптивность будет добавлена с помощью одной строки CSS.
Это означает, что нам не нужно загромождать HTML лишними классами ( Col-sm-4 , col-md-8 ) или создавать медиа-запросы для каждого размера экрана.

Настройка

В этой статье мы продолжим работу с сеткой, которую мы использовали в моей первой статье по CSS Grid. Затем мы добавим изображения. Вот как выглядит наша начальная сетка:

Примечание. В примере есть базовые стили, которые я не буду рассматривать здесь, поскольку они не имеет ничего общего с CSS Grid.

Если этот код вам непонятен, я бы рекомендовал вам прочитать мою статью «Учим CSS Grid за 5 минут», где я объясняю основы создания макетов.

Начнем с того, что сделаем колонки адаптивными.

Базовая адаптивность с единицей измерения fr (fractional unit)

CSS Grid приносит с собой совершенно новое значение, называемое долей единицы. Доля единицы записывается как fr , и она позволяет разбить контейнер на столько частей, сколько захотите.

Давайте изменим размер каждого столбца на 1fr.

Здесь происходит то, что сетка распределяет всю ширину на три части, и каждый из столбцов занимает по одной единице. Вот результат:

Если мы изменим значение grid-template-columns на 1fr 2fr 1fr , второй столбец будет в два раза шире, чем два других столбца. Общая ширина теперь равна четырем единицам fr, второй столбец занимает две из них, а остальные — по одной. Вот как это выглядит:

Другими словами, значение единицы fr позволяет вам легко изменять ширину столбцов.

Расширенная адаптивность

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

repeat()
Мы начнем с функции repeat (). Это мощный способ указания столбцов и строк. Давайте возьмем исходную сетку и изменим ее используя repeat ():

Другими словами, repeat(3, 100px) идентично 100px 100px 100px . В первом параметре указано, сколько столбцов или строк вы хотите, а второе определяет их ширину, поэтому это даст нам тот же самый макет, с которого мы начали:

auto-fit
Давайте вместо фиксированного количество столбцов, определим их автоматически, заменив 3 на auto-fit.

Это приводит к следующему поведению:

Однако, если мы захардкодим все столбцы ровно на 100 пикселей, мы никогда не получим необходимую гибкость, так как они редко будут заполнять всю ширину. Как вы можете видеть на гифке выше, сетка часто оставляет пустое пространство с правой стороны.

minmax()
Конечный ингредиент, который нам нужен, чтобы исправить это, называется minmax () . Мы просто заменим 100px на minmax (100px, 1fr) .
Вот окончательный CSS.

Это приводит к следующему поведению:

И, как вы видите, это прекрасно работает. Функция minmax () определяет диапазон размеров, который больше или равен min и меньше или равен max.

Таким образом, столбцы теперь будут всегда не менее 100 пикселей. Однако, если имеется больше свободного места, грид будет распределять место поровну каждому столбцу, поскольку столбцы будут занимать 1fr вместо 100 px.

Добавление изображений

Теперь последний шаг — добавить изображения. Это не имеет ничего общего с CSS Grid, но давайте рассмотрим код.

Мы начнем с добавления тега изображения внутри каждого элемента грида.

Чтобы изображение поместилось в элемент, мы установим его ширину и высоту, как и у самого элемента, а затем применим object-fit: cover ; . Это заставит изображение покрыть весь контейнер, и браузер обрежет его, если это необходимо.

Вот и все. Теперь вы знаете одну из самых сложных концепций в CSS Grid.

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

Прежде чем мы закончим, мне также необходимо рассмотреть поддержку CSS Grid браузерами. На момент написания этой статьи 77% браузеров поддерживало CSS Grid, и этот процент растет.

Я верю, что 2018 год станет годом CSS Grid. Гриды достигнут своего прорыва и превратятся в необходимый инструмент для разработчиков интерфейсов. Как и то, что произошло с CSS Flexbox за последние пару лет.

Перевод выполнен при поддержке компании EDISON Software, которая профессионально занимается проектированием ПО (вот примеры ТЗ: раз, два, три), а так же созданием ПО для крупных заказчиков (микротомограф, мобильная связь, освещение города).

Читать еще

Источник