Адаптивная CSS-grid сетка в 3 колонки с помощью 3-х CSS-свойств
Можете не поверить, но чтобы создать полностью адаптивную CSS-сетку в 3 колонки, как на картинке выше, достаточно знать только 3 CSS-свойства.
Начнем с HTML-макета. Здесь будут контейнер и несколько div внутри него: шапка (header), подвал (footer) и 3 колонки для статей:
ШАПКА СТАТЬЯ 1 СТАТЬЯ 2 СТАТЬЯ 3 ПОДВАЛ Сперва, надо настроить CSS-grid контейнер и оставить небольшое расстояние между ячейками:
.container
Самая важная часть состоит в представлении реальной сетки. Если поместить этот макет в Excell-таблицу, он выглядел бы так:
Это можно перевести в CSS с помощью свойства grid-template-area :
.container
А затем, чтобы разместить HTML-элементы в соответствующей ячейке CSS-сетки, можно использовать свойство grid-area :
.header < grid-area: h; >.art.first < grid-area: a1; >.art.second < grid-area: a2; >.art.third < grid-area: a3; >.footer
Делаем CSS-сетку адаптивной
Чтобы сделать разметку отзывчивой, нужно просто изменить макет таблицы:
Тут на помощь приходит медиа-запрос и снова свойство grid-template-areas :
@media only screen and (max-width: 600px) < .container < grid-template-areas: "h" "a1" "a2" "a3" "f"; >>Стоит заметить, что можно было бы использовать display: block , но идея состоит в том, чтобы показать, насколько гибкими и полезными могут быть grid-template-areas для управления конфигурациями макета.
И это все! Всего 3 CSS-свойства ( grid-area , grid-gap и grid-template-area ) понадобилось для создания полностью адаптивного макета с помощью CSS-grid.
Классические 3 колонки
У этого макета html-страницы есть верхний и нижний колонтитулы (шапка и подвал), левая и правая боковые панели, основной контент.
Чтобы написать такую сетку с помощью всего одной строки кода, можно использовать CSS-свойство grid-template . Это позволяет одновременно устанавливать параметры строк и столбцов шаблона.
Пара свойство и значение: grid-template: auto 1fr auto / auto 1fr auto . Косая черта между первым и вторым списками параметров – разделитель настроек для строк и столбцов.
.parent < display: grid; grid-template: auto 1fr auto / auto 1fr auto; >Здесь левая и правая боковые панели автоматически изменяют свою ширину в зависимости от размера их дочерних элементов.
Макет в 3 колонки
Здесь вы узнаете, как сделать 3-х колоночный макет сетки при помощи CSS.
Колонка 1
Колонка 2
Колонка 3
Как сделать макет в 3 колонки
Шаг 1) Добавляем HTML:
Шаг 2) Добавляем CSS:
Здесь мы создаем три одинаковые колонки:
.column < float: left; width: 33.33%; >/* Сбрасываем обтекание после колонок */ .row:after
Здесь мы создаем три колонки разной ширины:
.column < float: left; >.left, .right < width: 25%; >.middle
Здесь мы добавляем колонкам адаптивность:
/* Адаптивный макет – когда ширина экрана меньше 600px, колонки будут отображаться друг над другом, а не рядом друг с другом */ @media screen and (max-width: 600px) < .column < width: 100%; >>
Текст в три колонки
Примеры, как вывести текст в три колонки одинаковой ширины и отступом между ними с помощью разных CSS-свойств.
Inline-block
Элементы со свойством display: inline-block встают в одну строку, но у них появляются отступы, чтобы их убрать можно указать e родительского блока font-size: 0 или white-space: nowrap .
.textcols < white-space: nowrap; font-size: 0; >.textcols-item < white-space: normal; display: inline-block; width: 30%; vertical-align: top; background: #fff2e1; margin-right: 5%; font-size: 14px; >.textcols .textcols-item:last-child