Как сделать колонки разной высоты

Обновлено: 04.07.2024

У нас идёт цикл статей о современном CSS: как на нём собирать штуки, о которых раньше мы могли только мечтать. В прошлый раз мы говорили о CSS-сетке Grid. Сегодня мы её будем настраивать.

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

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

Готовим шаблон

Начнём с пустого шаблона. Чтобы было наглядно видно, как в сетке располагаются ячейки, сделаем так:

Создадим общий класс, который будет отвечать за сетку целиком. Пока не будем делать разбивку на строки и столбцы.
В нём сделаем видимые внешние границы — так мы поймём, какого размера сетка у нас получается.
Каждую ячейку закрасим светло-оранжевым цветом, чтобы видеть, где заканчивается одна ячейка и начинается другая.
Добавим в оформление ячеек отступы и скругления для красоты.
После этого в теле страницы создадим новый блок и применим к нему наш стиль с сеткой.
Добавим 10 новых элементов в сетку и посмотрим, что получится.

Вот что у нас получается, если у сетки не задавать никаких параметров:

элементы располагаются друг под другом в одну колонку;
сетка растягивается по ширине на весь экран;
элементы тоже растягиваются по ширине;
по высоте сетка занимает ровно столько, чтобы вместить всё содержимое. На всю высоту сетка автоматически не растягивается.

Формируем строки и столбцы

Давайте посмотрим, как добавление строк и столбцов в сетку влияет на положение и размер ячеек.

Сделаем в сетке три колонки по 150 пикселей:

grid-template-columns: 150px 150px 150px;

Сетка сразу уменьшилась по высоте, подстраиваясь под количество элементов. Теперь укажем нужную высоту для элементов:

Смотрите, высота поменялась только у первой строки. Остальные остались той же высоты, что и раньше, потому что мы указали только один параметр в команде grid-template-rows. Сделаем 5 строк одинаковой высоты:

grid-template-rows: 50px 50px 50px 50px 50px ;

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

Чтобы не писать пять раз подряд размер 50px, можно использовать такую команду:

grid-template-rows: repeat(5, 50px);

Она повторяет нужный нам размер (50 пикселей) определённое количество раз — в нашем случае это 5 раз. То же самое работает и с колонками — сделаем 4 одинаковые колонки используя функцию repeat():

grid-template-columns: repeat(4, 150px);

Адаптивные размеры и автозаполнение

Теперь сделаем так:

поставим три строки вместо пяти;
последнюю строку растянем вниз до конца окна — используем для этого 1fr;
столбцы сделаем одинаковой ширины.

Запишем это в разделе со стилями:

grid-template-rows: 50px 1fr 50px;
grid-template-columns: repeat(4, 1fr);

Кажется, что 1fr, который должен был растянуть вторую строку на всё свободное место, не работает. Но с ним всё в порядке, ошибки тут нет, смотрите, что произошло на самом деле:

Первая строка получила ширину 50 пикселей.
Третья строка тоже получила 50 пикселей.
После этого браузер, глядя на 1fr, стал высчитывать, какую высоту сделать у второй строки.
Браузер знает, что 1fr должен заполнить всё оставшееся свободное место в сетке, но у нас нижняя граница сетки прилегает вплотную к последней строке.
Это значит, что свободного места в сетке нет, поэтому браузер учёл все внутренние отступы из общих настроек ячейки и сделал вторую строку минимальной высоты.

Чтобы сетка растянулась по высоте на всё окно, используют относительные единицы, например, vh — она указывает, сколько процентов от высоты окна будет занимать элемент. Чтобы растянуть сетку до края, напишем:

Полосы прокрутки появились из-за того, что общий размер сетки у нас больше 100% высоты окна — к высоте добавились внешние и внутренние отступы сетки.

Если нам нужно сделать столбцы и строки в определённых пропорциях, также используем fr — он подгонит всё под размер окна:

height: 92vh;
grid-template-columns: 1fr 2fr 2fr 1fr ;
grid-template-rows: 50px 1fr 50px;

Теперь у нас получился красивый шаблон на 12 ячеек:

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

Используя нужные размеры, автозаполнение и полезные функции из нашей подборки современных CSS-команд, можно получить любой шаблон для вёрстки страницы.

Что дальше

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

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

На вкладке Разметка страницы или Макет нажмите кнопку Колонки. В нижней части списка выберите Другие столбцы.

В диалоговом окне Столбцы настройте параметры в поле Ширина и интервал, чтобы выбрать ширину столбцов и интервал между ними.

Если вы хотите, чтобы столбцы разной ширины были разной ширины, отобирайте их рядом с полями Равная ширина столбцов.

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

Чтобы добавить вертикальную линию между столбцами, в диалоговом окне Столбцы (см. выше) выберите поле Линия между столбцами.

Вы можете увидеть в документе колонки в стиле Word в Интернете, но не можете в них создавать и менять их по своим типам.

В Word можно добавлять столбцы текста и управлять ими. Если у вас есть настольное приложение Word, нажмите кнопку Открыть в Word (или Редактировать документ > Изменить в Word)и выполните действия, которые см. в статье Настройка ширины столбцов на странице. Когда вы сохраните документ, он будет сохранен там, где вы открыли его в Word в Интернете, и когда вы откроете его, вы увидите новую ширину столбцов.

В данной статье поговорим о создании сеток в HTML. Разберём сетку в Twitter Bootstrap и приведём популярные решения для трёх случаев:

old way — старый стиль, работающий во всех популярных браузерах;
new way — современный стиль, работающий во всех современных браузерах (IE > 9) (twitter bootstrap 4);
feature way — божественный стиль (будущий), работающий в прогрессивных браузерах.

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

Одна из самых популярных реализаций колонок была представлена в Twitter Bootstrap 3.

Принцип работы в следующем:

Создаём родителя (row), для которого задаём отрицательные отступы margin слева и справа. (Это необходимо, чтобы колонки располагались по центру без необходимости указывать дополнительные классы первому и последнему элементам, чтобы выровнять колонки);
Так как колонки будут располагаться с помощью плавающего свойства float, к родителю применяется утилита clearfix, которая позволит нормализовать высоту родителя и устранит нежелательные сайд эффекты;
Все дочерние элементы (.col) родителя получают положительные отступы слева и справа с помощью padding. Для позиционирования также устанавливается свойство float: left ;
Считается, что в сетке не может быть более 12 колонок, поэтому базовая ширина колонки равна 1/12, в пересчёте на проценты ~8.33% . Соответственно, если колонка занимает размеры двух одинарных колонок, ширина будет 2/12, и так далее;
Для того, чтобы колонки не проваливались друг в друга в случае, если одна колонка не имеет “видимого” содержимого, каждая колонка получает свойство min-height: 1px .

Создадим следующую HTML структуру со следующими стилями:

Сначала мы объявили константы:

old-columns — количество колонок
old-gutter — расстояние между колонками

Для родителя задали отступы слева и справа, а также добавили clearfix :

Для колонок добавили отступы и базовые стили, общие для всех:

Для примера, мы используем селекторы атрибутов ([class^=’old-column-’]), но в продакшене, старайтесь их изберать.

Саму сетку создали средствами SCSS:

Которая в итоге сгенерирует набор классов с постфиксами от 1 до 12:

Откроем в браузере:

Для добавления адаптивности, необходимо добавить точки остановок (breakpoints)для нужных размеров, а также задать соответствующие суффиксы классам колонок:

Как видно, для задания размеров мы использовали коллекции (map) в SCSS и с помощью цикла обошли все размеры и сгенерировали нужные классы с нужными суффиксами. Подробнее о работе map’ов в документации SASS.

В результате получим:

На gif’ке видно, как колонки изменяются в зависимости от ширины экрана.

Полную реализацию колонок, вы можете посмотреть в исходниках Twitter Bootstrap 3 в репозитории.

Преимущества:

Недостатки:

Невозможность лаконичной реализации дополнительной возможности — одинаковая высота колонок.

Как и ранее (в предыдущей статье — CSS решения. Фиксированный блок плюс адаптивный блок) лучшим решением является использование микро скрипта, который следит за изменением ширины блоков и обновляет высоту блоков.

Более прогрессивным способ для создания колонок является использование flex .

Принцип работы заключается в следующем:

Создаём родительский блок (.row) для которого указываем свойство display: flex . Так как колонки выстраиваются в линию и могут занимать больше 100%, для этого ставиться свойство flex-wrap: wrap ;
Для создания корректных отступов задаём отрицательные margin-left и margin-right ;
Для всех потомков первого уровня задаем свойства position: relative , которое гарантирует корректную обработку, width: 100% что позволит нормализовать свойства всех потомков и уравнять их права на доступную им ширину, а также отступы слева и справа с помощью padding ;
Также создаются разные классы колонок (.col-1, .col-2, …), которые принимают соответствующие размеры в пропорции 1 к 12. В отличии от предыдущего решения, регулирование ширины колонок осуществляется с помощью свойств flex и max -width .

Создадим следующую структуру HTML и классы, описанные выше:

Как можно увидеть из реализации, решение почти совпадает с old-way.

Откроем в браузере:

Так как решение уже учитывает адаптивность изменим ширину браузера и посмотрим на результат:

Ознакомиться с полным решением можно в репозитории Twitter Bootstrap.

Добавим немного контента в колонки, чтобы посмотреть, что будет с высотой колонок:

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

Преимущества:

Недостатки:

Последним решением является создание сеток средствами W3C — использование display: grid .

Принцип работы в следующем:

Создаётся родительский блок, который будет сразу определять размеры и количество колонок. Блок получает свойство display: grid .
Для задание строк используется свойство grid-template-rows , которое принимает доступные размеры строк. Например: 1fr — создаст сетку с 1 строкой; 1fr 2fr 1fr — создаст сетку с 3 строками, где средняя строка будет занимать 50% всей доступной высоты
Для задания столбцов используется свойство grid-template-columns , которое принимает доступные размеры столбцов (аналогично grid-template-rows ).

Создадим сетку подобную тем, что приводились в примерах ранее:

Откроем в браузере:

На скриншоте видим, что отрицательных отступов нету и колонки занимают все доступное расстояние.

Так как мы использовали единицы гибкости (fr), колонки получаются одинаковой высоты.

Если изменим ширину:

Стоит отметить, что принципы создания сеток отличаются от модели сеток используемых в Twitter Bootstrap, которые приводились ранее. В данном случае блок, который объявляет сетку уже заранее знает все свои свойства, поэтому дополнительно указывать классы не нужно.

Преимущества:

Недостатки:

Не работает в старых браузерах;
Требует перестройки мышления по построению и использованию сеток.

Дополнение

Небольшая демонстрация работы всех трёх решений:

В данной статье рассмотрели основные решения, используемые для создания сеток.

Разобрали типовые решения, а также привели привели следующие реализации:

старый стиль, который основан на решении Twitter Bootstrap 3;
современный стиль, который основан на решении Twitter Bootstrap 4;
будущий стиль, который основан на принципах построений сеток средствами CSS display: grid .

Спасибо за внимание!

Все исходники находятся на github, в репозитории:

Fafnur/medium-stories

This project was generated using Nx. 🔎 Nx is a set of Extensible Dev Tools for Monorepos. Nx Documentation 10-minute…

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — css-grid.

При написании информационных ресурсов довольно часто прибегают к многоколоночной схеме. Другими словами содержимое страницы разбивается на несколько колонок. Такой принцип чаще используется для текстовой части контента. При этом объем текста в каждой колонке может быть разный. Возникает вопрос, каким образом сделать так, чтобы при разной величине текста выровнять по высоте колонки, причем изначально высота блока остается неизвестной. Ниже представлена схема двух разных случаев

Из двух представленных схем более часто встречается первая. Поэтому сегодня мы будем рассматривать возможные варианта реализации таких дизайнов. Также стоит отметить, что для устаревшей табличной версткой этот вопрос совсем не проблематичный, а вот при блочной верстке, которая господствует в наше время, возникают некоторые трудности. Но еще не было той проблемы, которую не решит хорошая смекалка и упорная работа.

Фоновый рисунок

Итак, идея вполне предсказуемая и заезженная (так как многие проблемы решаются заменой картинкой), она имеет ряд преимуществ, которые нельзя не отметить:

высокие показатели кроссбраузерности;
нет никаких проблем с валидацией;
используется минимальное количество вспомогательных блоков, что сокращает объем HTML-кода.

Как обычно, не бывает плюсов без минусов:

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

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

Высоту этой линии рекомендуется использовать величиной 1 пиксель, для экономии размера изображения. Устанавливаем циклическое повторение этой картинки по оси ординат и получаем колонки одинаковой высоты (по крайней мере визуально). Ниже представлен код, с помощью которого реализуется данный метод

В итоге в браузере получаем такую картину:

margin + padding + overflow

Это решение я бы описал, как наглое но очень действенное. Принцип работы его заключается в том, что создается родительский элемент с очень большим значением высоты, которое достигается за счет значения свойства padding-bottom, но в тоже время компенсируется таким же отрицательным значением наружного отступа - margin-bottom. И плюс к этому добавляем свойство overflow родителю со значением hidden, что позволит обрезать высоту родителя по высоте самой большой колонки.

Для этого в код записываем

Результат в браузере будет аналогичен предыдущему способу.

Для этого метода будут характерны следующие положительные эффекты:

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

в старых версиях браузера Opera не работает, так как этой программой неверно трактуется свойство overflow.

Метод дополнительных оберток

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

Читайте также: