Css grid 2 колонки пример

CSS-гриды + CSS-колонки = ♥

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

Эти два инструмента можно использовать вместе весьма интересными способами для построения отзывчивых веб-дизайнов.

Начнём с обзора, что каждый из их делает.

CSS-колонки

CSS уже давно умел размещать контент по колонкам, и у них очень хорошая поддержка во всех актуальных браузерах (правда, для них по-прежнему нужны префиксы). (прим. перев.: для актуальных версий уже и префикс не нужен)

Чаще всего CSS-колоноки нужны, чтобы разбивать длинные разделы текста на несколько колонок, чтобы строки не становились такими длинными, что их неудобно читать.

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

Например, можно определить совсем простую многоколоночную раскладку с помощью CSS-свойства column-width: 150px; и браузер просто добавит в доступную область столько колонок, сколько их вмещается:

Длинный текст перетекает из колонки в колонку

CSS-гриды

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

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

Зайдите на сайты Джен Симмонс, Рейчел Эндрю или песочницу Мозиллы по гридам, чтобы узнать о гридах всё.

Колонки + гриды = ♥

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

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

Простой двухколоночный грид на CSS

А вот теперь интересный момент: на самом деле можно разместить грид в колоночной раскладке! И это просто круто!

В принципе, грид поддерживает разбивку на фрагменты, а значит он тоже будет перетекать по колонкам. Он будет разбит на фрагменты, где нужно, по фрагменту на колонку. Эти фрагменты — всего лишь части одного и того же грида.

Итак, давайте возьмём простой пример формы на основе грида, и посмотрим что будет, если положить её внутрь многоколоночной раскладки с column-width: 150px :

CSS-грид разбился на несколько фрагментов.

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

Вот так мог бы выглядеть весь код:

 .columns < column-width: 200px; max-width: 800px; margin: 0 auto; >.grid 
label label label .
 

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

Фрагментирование внутренних отступов и границ

Если по какой-то причине вам захочется добавить самому гриду границу и внутренний отступ, тогда произойдёт примерно следующее:

Обрезанные границы и отступы

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

Очевидно, выглядит не очень. К счастью, и это можно решить с помощью CSS — свойства box-decoration-break . Оно определяет, как фон, границы, внешние и внутренние отступы должны работать в случаях с фрагментацией (или в случаях, когда инлайн-элемент переносится на несколько строк текста).

С помощью box-decoration-break: clone; можно получить ожидаемое поведение:

Границы и отступы теперь клонированы во всех фрагментах

Вот и всё! Можете поиграть со сложными примерами здесь на codepen, он также включает несколько забавных маленьких CSS-счётчиков, благодаря которым я пронумеровал подписи одним лишь CSS.

Счастливого коддинга, и до встречи!

P.S. Это тоже может быть интересно:

Если вам понравилась статья, поделитесь ей!

Источник

Как создать сетки на CSS Grid Layout

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

Например, с помощью гридов легко создать такой раздел:

Как создать сетку на гридах

Чтобы добавить сетку, нужно в стилях родительского элемента написать display: grid . Далее указывается количество столбцов и строк в сетке, задаются их размеры.

Описать количество и размеры столбцов — grid-template-columns .

Описать количество и размеры строк — grid-template-rows .

Например, так создаётся сетка из двух столбцов шириной 200px и двух строк высотой 150px :

Как задать размеры столбцов и строк

В процентах. Ширина колонки и высота ряда считаются относительно родительского контейнера. Например, grid-template-columns: 50% 50% создаст две одинаковые колонки шириной в половину родительского элемента.

В пикселях. Устанавливает точную ширину столбца или высоту строки — мы так делали в примере с котами: grid-template-columns: 200px 200px .

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

C помощью ключевого слова fr (fraction). Всё пространство в сетке делится на равные доли fr . Например, колонка grid-template-columns: 1fr растянется на всю область родительского контейнера. А если написать grid-template-columns: 1fr 2fr , вы получите две колонки, при этом вторая будет в два раза шире.

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

В этом примере мы создаём четыре колонки. У первой фиксированная ширина, последняя занимает 25% пространства, а вторая и третья делят оставшееся пространство на две равные доли.

Как разместить элементы в гриде

По умолчанию все элементы располагаются в гриде слева направо сверху вниз и занимают одну ячейку сетки. Нумерация считается по линиям, как на картинке:

Чтобы расположить элемент в сетке, нужно задать ему координаты. Например, первый кот начинается на линии 1 столбца и линии 1 ряда, а заканчивается на линии 2 столбца и линии 2 ряда. Кот в очках начинается на 3 линии столбца и 1 линии строки, а заканчивается на 4 линии столбца и 2 линии строки.

Также можно использовать обратную нумерацию. Это полезно, например, когда нужно работать с элементами в крайнем правом столбце или нижнем ряду.

Здесь кот в очках находится между линиями столбцов -1 и -2:

Стили для расположения элементов в сетке: grid-column и grid-row

grid-column-start и grid-column-end указывают, в каком столбце начинается элемент и в каком заканчивается. Например:

grid-row-srart и grid-row-end указывают, какие строки занимает элемент. Здесь всё, как со столбцами:

Для этих свойств есть сокращённые записи: grid-column и grid-row . В них можно сразу прописать, на какой линии начинается и заканчивается элемент — это делается через черту, вот так: grid-row: 1/3.

Свойство grid-area и repeat

Свойствоgrid-area

Писать каждый раз начальные и конечные координаты для столбцов и рядов — долго и не всегда удобно. Но можно сократить запись с помощью свойства grid-area , оно объединяет и заменяет grid-column и grid-row .

Свойство grid-area принимает четыре значения, которые разделяются косой чертой: grid-row-start , grid-column-start , grid-row-end и grid-column-end :

Эта же запись в полном варианте:

Ключевое словоrepeat

Второй способ сократить код — использовать ключевое слово repeat . Оно помогает, когда в grid-template-columns или grid-template-columns нужно создать множество одинаковых колонок или рядов:

С ключевым словом repeat код выглядит так:

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

Границы и отступы

Границы между элементами задаются с помощью свойства gap . Например, gap: 10px добавит отступы между элементами по бокам и сбоку:

Чтобы задать только боковые отступы, используйте grid-column-gap , а для отступов между рядами — grid-row-gap .

Как изменить порядок элементов

Первый — указать расположение элемента с помощью grid-column , grid-row или grid-area . К примеру, у нас есть такой список:

 
Кот Кекс
 
Кот Барсик
 
Кошка Василиса
 
Кот Борис
 
 

На странице он выглядит так:

Поменяем порядок. Сделаем так, чтобы Кекс стал третьим и перешёл на вторую строку. Разметку не меняем, только стили:

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

Второй способ — использовать свойство order . По умолчанию элементы грида имеют order , равный 0 , но это значение можно менять. Например, вот что произойдёт, если мы добавим «Кексу» order: 1 :

Элемент переместится в конец:

Где отточить навык работы с гридами

«Старт в программировании» — курс для новичков. Он научит вас создавать страницы, в том числе строить сетки на флексах и гридах. Курс основан на тренажёрах и мастер-классах.

Grid Garden — интерактивная игра, которая поможет понять основы CSS Grid Layout. Вам предстоит поливать грядки с морковью и уничтожать сорняки с помощью гридов.

Раздело CSS Grid Layout — страница на официальной документации MDN. Поможет расширить знания о гридах и не только.

Grid by Example — на этом сайте вы найдёте множество примеров использования CSS Grid. Все статьи здесь на английском языке, но их можно перевести через переводчик, встроенный в браузер.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Полное визуальное руководство/шпаргалка по CSS Grid

Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.

Что такое CSS Grid ?

Грид — это макет для сайта (его схема, проект).

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

Вот простой пример макета сайта, созданного с помощью Грида.

Архитектура CSS Grid

Как же Грид работает? Элементы Грида (grid items) располагаются вдоль главной или основной (main) и поперечной (cross) оси (axis). При помощи различных свойств мы можем манипулировать элементами для создания макетов.

Помимо прочего, у нас имеется возможность объединять строки и колонки подобно тому, как мы это делаем в Excel , что предоставляет нам большую гибкость, чем Флекс ( Flexbox ).

К слову, если вас интересует Флекс, вот соответствующая статья.

Схема CSS Grid

Схема содержит все возможные свойства, предоставляемые Гридом. Эти свойства делятся на:

Обратите внимание: красным цветом отмечены сокращения для свойств:

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

Настройка проекта

Для данного проекта требуются начальные знания HTML , CSS и умение работать с VSCode (или другим редактором по вашему вкусу). Делаем следующее:

1. Создаем директорию для проекта, например, Project1 и открываем ее в редакторе ( cd Project1 , code . )
2. Создаем файлы index.html и style.css
3. Устанавливаем в VSCode сервер для разработки ( Live Server , расширение) и запускаем его

Или вы можете просто открыть Codepen (или любую другую песочницу) и начать писать код.

Все готово, можно приступать к делу.

HTML

Создаем 3 контейнера внутри body :

Источник