Доклад о технологии grid css
Обновлено: 07.07.2024
От автора: я помню, как впервые изучал CSS, и как я был рад узнать о display float и inline, которые позволяют размещать элементы, как нам нужно. Интересно, как бы я отреагировал, если бы в то время была доступна система двумерного макета? На самом деле, даже сейчас я взволнован этим, потому что это меняет все: как способ написания CSS, так и способ, которым мы пишем разметку. С помощью CSS Grid проще, чем когда-либо, создавать адаптивные, динамические и независимые от исходного формата макеты.
В этом посте мы узнаем обо всех свойствах CSS Grid для создания простых и более сложных макетов. Мы сначала рассмотрим основы, а затем копнем немного глубже, чтобы увидеть, чего мы можем достичь с помощью CSS Grid. С учетом вышесказанного, если вы готовы научиться новому подходу к проектированию, возьмите красную таблетку, и я покажу вам, насколько глубока кроличья нора.
1. Прежде чем мы начнем
Но прежде чем мы начнем, я хотел бы рассмотреть некоторые проблемы, которые могут у вас возникнуть, а также убедиться, что вы знакомы с основами CSS Grid и ее терминологией.
Вопросы и ответы
CSS Grid заменяет flex-box?
Что ж, CSS Grid не заменяет flex-box. Это два разных инструмента для разных целей. На самом деле, они очень хорошо работают вместе, у нас может быть flex внутри сетки и наоборот.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Каковы различия между CSS Grid и flex-box?
Различий много, но главное в том, что flex-box — это система одномерного макета, а CSS-сетка — это система двумерного макета. Посмотрите на рисунок 1.1 ниже:
Рисунок 1.1: Flex-box и CSS Grid
Почему не использовать вместо этого bootstrap?
Я думаю, что лучший ответ на этот вопрос — цитата Джен Симмонс: Чем больше я использую CSS Grid, тем больше я убеждаюсь в том, что никакой дополнительной выгоды от того, чтобы добавить дополнительный слой абстракции, не будет. CSS Grid — это структура макета, встроенная прямо в браузер — Джен Симмонс
Готова ли CSS-сетка уже к работе?
Основы
В принципе, сетка может быть разбита на два элемента: grid-контейнер и grid-элементы.
Рисунок 1.2: Основные элементы сетки
Как мы видим на рисунке 1.2, контейнер сетки представляет собой набор колонок и рядов. row или ряд — это пространство между двумя последовательными горизонтальными линиями, а column или колонка — это пространство между двумя последовательными вертикальными линиями. Ряд можно назвать треком, и то же самое относится и к колонке. Таким образом, трек сетки — это пространство между двумя параллельными линиями сетки.
Каждый трек может содержать одну или несколько ячеек сетки. Ячейка сетки является основной наименьшей единицей сетки. Это пространство между четырьмя пересекающимися линиями сетки. Если мы объединим несколько ячеек сетки вместе, мы получим область сетки. Важно отметить, что область сетки должна быть прямоугольной, например, у нас не может быть Т-образной области сетки.
Ряды сетки начинаются с 1 до количества рядов, которые вы явно или неявно определили. Номер последнего ряда сетки может указываться как -1, ряд сетки перед ним как -2 и так далее. Мы рассмотрим подробнее это позже.
На рисунке 1.2 количество линий колонок изменяется от 1 до 6 (от -6 до -1), а количество линий рядов — от 1 до 5 (или от -5 до -1).
Количество линий сетки считается явным, если вы явно установите его в CSS. И неявным, если оно установлено браузером динамически. Наконец, ячейки сетки могут быть разделены отступами. Эти отступы называются зазорами.
2. Основные свойства CSS сетки
Хорошо, теперь мы должны быть готовы начать реализацию некоторых сеток. Сначала мы поговорим обо всех свойствах, которые мы могли бы использовать с контейнером сетки, затем рассмотрим свойства элементов сетки. Давайте рассмотрим следующий шаблон для этого раздела:
Ищем WP-разработчика! Фулл-тайм, удаленка, хорошая зарплата, соц. пакет. Подробности.
Компания Boosta.
Базовые знания
Grid — это сетка с элементами на ней. Расставлять элементы можно как угодно. Представьте себе шахматную доску и фигуры, Grid контейнер это доска, элементы это фигуры. А дальше ставь как нравится.
Чтобы разобраться с Грид-сеткой нужно понять из чего конкретно состоит эта сетка. Для этого хорошенько изучите схему ниже и описание к ней.
Схема Grid сетки.
Описание Грид сетки
Контейнер — содержит Grid сетку, в которой находятся элементы.
Элементы — HTML элементы внутри сетки. Ими станут HTML элементы первого уровня (прямые дети контейнера). Чтобы элемент появился в сетке, в нем (внутри) элемента должно быть хоть что-то (текст, другие HTML теги). Пустой элемент - это всего лишь ячейка для расположения в нем чего-либо.
Линии — это образные линии (на самом деле никаких линий нет), разделяющие сетку на колонки и ряды, они создают структуру сетки. Линии автоматически нумеруются. Также линиям можно указывать имена, чтобы потом прикреплять к ним элементы по номеру или по имени линии. По сути линия — это номер или имя колонки/ряда. Расстояние между линиями (колонками/рядами) можно указать через grid-gap: , grid-row-gap: , grid-column-gap: .
Ряд/колонка (row/column, track) — все что находится между соседними линиями, т.е. линии разделяют сетку на ряды и колонки.
Ячейка (cell) — место куда будет расположен элемент. Ячейка это пересечение колонки и ряда.
Область (area, поле) — объединение одной или нескольких ячеек в общую ячейку (поле). Это такая большая ячейка также ограниченная линиями. Области можно задать имя, чтобы удобно было помещать туда элементы.
Для включения Grid, любому HTML элементу достаточно присвоить css свойство display:grid; или display:inline-grid; .
После включения grid свойства, внутри контейнера создаются grid сетка, а все вложенные элементы (первого уровня) станут ячейками сетки.
Пример создания грид-блока с двумя колками и тремя рядами разных размеров:
Особенности Grid
Элементы Grid сетки можно расставлять сразу на несколько полей сетки. Можно менять направление или расположения элементов в сетке. Колонкам и рядам можно давать имена. Можно создавать шаблон сетки и расставлять элементы по шаблону.
Размеры колонок/рядов. Сетку можно создавать с точными или гибкими размерами колонок/рядов (шириной/высотой). Точные это px , em , % , а гибкие новая единица измерения в grid fr (фракция - свободное место в сетке).
Расположение элемента. Элементы можно размещать в указанном месте сетки, указав номер колонки/ряда или их имя (если оно есть). Или путем привязки элемента к области Grid (область нужно создать). Если не указать конкретное расположение элемента в сетке, то элемент размещается по умолчанию в первую свободную ячейку: как во flex: по горизонтали (→) или по вертикали (↓). Поведение по умолчанию можно изменить через свойство grid-auto-flow: .
CSS свойства Grid
Для контейнера
Включает grid свойство для элемента. Под это свойство попадает сам элемент и вложенные в него элементы: затрагиваются только потомки первого уровня - они станут элементами grid контейнера.
- grid - элемент растягивается на всю ширину и имеет свое полное пространство среди окружающих блоков. Происходит перенос строк в начале и в конце блока.
- inline-grid — элемент обтекается другими элементами. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
grid и inline-grid отличаются тем что по-разному взаимодействуют с окружающими элементами, подобно display:block и display:inline-block .
Указывают из скольки рядов (строк) и скольки колонок состоит сетка и какие у них размеры. Т.е. указывается сразу два понятия: сколько и какой размер.
В значении через пробелы указываются размеры: высота ряда (rows) или ширина колонки (columns). Сколько раз будет указан размер, столько будет рядов/колонок.
размер — это высота ряда или ширина колонки, может быть:
auto — размер ряда/колонки подстраивается под размеры элементов, так, чтобы уместился самый большой из них. Не дает сжиматься меньше min-width или min-height самого широкого или высокого элемента соответственно. Не дает растягиваться больше, чем max-content . Если в контейнере есть свободное место, то размер может растянуться до конца контейнера.
px, em, %, vh, vw — размер абсолютный (px, pt), относительный (em, vw, vh) или в % от ширины/высоты контейнера.
fr (фракция - свободное место в сетке) — специальная единица измерения в grid. Свободное место в контейнере делится на фракции, так если одной колонке указать 1fr , а другой 2fr , то вторая будет больше первой в 2 раза и обе они заполнят все свободное пространство. Аналог flex-grow: у флексов. Тут можно также указывать дробные значения: 0.5fr, 2.3fr .
min-content — наименьший размер контента. Для текста это ширина самого длинного слова или неразрывного фрагмента.
max-content — наибольший размер контента. Для текста это длина самой большой строки без переносов.
fit-content( max ) — функция которой передается макс. размер. Если контент меньше этого размера, ведет себя как auto , если больше, то ограничивает размер ряда/колонки до указанного в параметре max.
line-name (имя линии) — перед размером можно указать (создать) имя для линии (ряда/колонки). Имя указывается в квадратных скобках [имя] 100px . Также можно указать сразу несколько имен через пробел внутри квадратных скобок: [имя еще_имя] 100px . Символы в имени можно использовать любые, в том числе кириллицу.
У двух этих свойств есть сокращенные записи:
Примеры:
Создадим сетку (контейнер) с тремя колонками и тремя рядами последняя колонка и ряд будут иметь одинаковое имя 'main'
Если не указать имя, то ряд/колонка автоматом получает два порядковых числовых имени: положительное и отрицательное:
Укажем конкретные имена (обратите внимание как указывается имя для последней линии):
Меню может иметь не одно, а несколько имен, этот пример добавляет два имени row1-end и row2-start :
Если в перечисление размеров колонок есть повторяющиеся части, то можно использовать функцию repeat() :
Если несколько строк имеют одно и то же имя, на них можно ссылаться по имени и порядковому числу:
fr позволяет указать размер относительный оставшегося свободного места в контейнере. В этом примере свободное место в контейнере делится на число указанных фракций (у нас 3) и для каждой определяется ширина. Так если ширина контейнера 90px то каждая колонка будет шириной по 30px.
Свободное пространство высчитывается после того как посчитаны жесткие размеры (включая разрывы). В этом примере размер свободно пространства высчитывается как ширина контейнера минус 50px.
Позволяет создать визуальный шаблон сетки. В этом свойстве задаются имена ячейкам, а затем элементы привязываются к этим именам через свойство grid-area: указываемое для отдельного элемента.
Синтаксис шикарен, потому что визуально показывает как выглядит сетка:
"имя имя2 имя3" — в значении внутри кавычек нужно через пробелы указывать имена. Каждые кавычки с именами будут представлять собой ряд сетки, а имена внутри кавычек задают имена ячейкам внутри этого ряда.
"имя имя имя2" — если указать одно и тоже имя несколько раз подряд, то имя объединит ячейки и мы получим область (большую ячейку). Объединять ячейки таким способом можно не только внутри ряда, но и между рядами.
. (точка) — указывается вместо имени и обозначает ячейку которую нужно пропустить (пустую ячейку). Можно использовать несколько точек подряд, пока между ними нет пробела они будут считаться за одну.
-
Символы в имени можно использовать любые, в том числе кириллицу.
Каждый ряд должен иметь одинаковое количество ячеек.
При использовании этого метода линии (включая последнюю линию) получают имена автоматически. Например, если область называется bar , то имя начальной линии ряда и колонки у этой области будет bar-start , а имя последней bar-end . Это значит, что некоторые линии будут иметь много имен. Например крайняя левая линия из примера ниже (шаблон страницы) будет иметь сразу три имени: header-start , main-start и footer-start .
Такая же логика работает и наоборот, если линиям указать имена дом-start и дом-end , то все что находится межу этими линиями превращается в область (ячейку) с именем дом .
grid-template-areas: также можно указывать в первом значении свойств:
Примеры:
Шаблон страницы. Создадим сетку с четырьмя колонками и тремя рядами. Весь верхний ряд будет шапкой (header), средний ряд будет контентом (main) и сайдбаром (sidebar), между которыми оставим место (.). И последний рад будет подвалом (footer).
Размеры и области можно указывать одновременно:
Позволяет разом указать три свойства: grid-template-rows , grid-template-columns и grid-template-areas .
Примеры:
В первом параметре (в рядах) можно указать шаблон (области). 25px - это высота ряда.
CSS Grid Layout — это модуль CSS, который определяет систему макета на основе двумерной сетки, оптимизированную для дизайна пользовательского интерфейса.
В заранее определенной гибкой сетке макета мы можем размещать дочерние элементы.
Если мы посмотрим на данные с сайта Can I use то увидим, что CSS Grid Layout на данный момент поддерживается большинством современных браузеров.
Grid Layout позволяет кардинально изменять структуру визуального макета, не требуя соответствующих изменений разметки. Комбинируя медиа-запросы со свойствами CSS, можно легко добавлять адаптивность для отображения на мобильных устройствах, сохраняя при этом более идеальную семантическую структуру HTML кода.
Давайте изучим CSS Grid Layout на примере страницы с шестью блоками.
Наш изначальный HTML код будет выглядеть так:
CSS код, он нам нужен для красоты и наглядности:
Наша страница будет выглядеть так:
Отлично, красоту мы навели, теперь давайте разберемся как же все-таки создается грид.
Свойства display: grid и display:inline-grid
Для того чтобы создать грид, для контейнера с классом .grid мы добавляем свойство display: grid . У display: inline-grid , разница с обычным grid такая же, как у inline-block c block .
Итак, запишем:
С этого момента контейнер .grid будет являться гридом, визуально разницы мы пока не увидим, для этого нам понадобятся новые свойства которые мы рассмотрим далее. Как же нам понять, какие изменения произошли? Для этого мы можем воспользоваться developer tools браузера хром и с помощью Inspect CSS Grid мы можем посмотреть, что из себя представляет наш грид.
А представляет он из себя одноколоночный грид с шестью рядами.
Свойства grid-gap, row-gap и column-gap
Для задания отступов между ячейками грида используется grid-gap . Зададим ему значение в 10px.
В свою очередь grid-gap объединяет два свойства:
- row-gap — это расстояние между рядами.
- column-gap — это расстояние между колонками.
Если использовать отдельные свойства, то код будет выглядеть следующим образом.
Свойство grid-template-columns
Теперь добавим колонки.
Ширину мы можем указывать в любых CSS единицах длины, в процентах и в единицах fr.
fr (от fraction — часть) это новая форма единицы измерения созданная для гридов, которая позволяет добавлять столько колонок, сколько мы захотим, не заботясь о конкретном значении ширины колонки. Свободное место распределяется между такими колонками пропорционально количеству fr.
1fr 1fr 1fr — такая запись означает, что мы создаем 3 колонки одинаковой ширины.
Ширина грида равна 400px. Если мы зададим для grid-template-columns следующие значения: 1.5fr 2fr 1fr , то ширина всех колонок будет равна 1.5fr + 2fr + 1fr= 4.5fr.
Теперь вычислим ширину каждой колонки. Первая колонка будет иметь ширину 1.5fr / 4.5fr * 400px. Что в итоге равно 133px. Соответственно рассчитаем остальные значения.
Вторая колонка 2fr / 4.5fr * 400px = 178px, третья колонка 1fr / 4.5fr * 400px = 89px. Т.е. мы могли задать колонки таким образом:
grid-template-columns: 133px 178px 89px;
В сумме общая ширина равна 400px.
В этом случае, если мы захотим добавить еще одну колонку либо наоборот убрать, нам придется пересчитать и заменить все значения вручную. С единицей измерения fr все пересчитается автоматически.
Свойство grid-template-rows
Это свойство позволяет добавлять строки в грид.
Давайте отвлечемся и посмотрим подробнее, что из себя представляет наш грид и разберем несколько новых понятий.
Грид-контейнер — элемент, в котором находится сетка грида.
Грид-линии — невидимые вертикальные и горизонтальные линии, разделяющие грид на ячейки. У грид линий есть нумерация, а также им можно задавать имена. На изображении помечены красными (вертикальные линии) и фиолетовыми стрелками (горизонтальные линии).
Грид-полосы — пространство, которое ограничено парой соседних грид-линий. Бывают вертикальные и горизонтальные.
Грид-ячейки — то, что получается на пересечении двух грид-полос. По аналогии с ячейками таблицы. На картинке это синие блоки с буквами, в количестве шести штук.
Грид-области — прямоугольники из смежных грид-ячеек. Каждая грид-область ограничена двумя парами грид-линий (парой вертикальных и парой горизонтальных).
Грид-интервалы — пустые пространства между соседними грид-полосами.
Свойства grid-auto-rows, grid-auto-columns и grid-auto-flow
В примере создания колонок вы могли заметить, что мы не задавали колонки. Это произошло потому что колонки и строки могут быть заданы в явном и в неявном виде.
Если мы не указываем grid-template-rows , это значит, что в случае надобности строки будут добавляться автоматически и будут неявными.
Высота строки на неявных гридах должна выставляться с помощью свойства grid-auto-rows .
В свою очередь для колонок есть свойство grid-auto-columns которое выставляет ширину колонки.
Свойство grid-auto-flow позволяет указать, что нужно использовать для авто-размещения элементов, строки или колонки. По умолчанию его значение равно row .
Рассмотрим пример, показывающий неявное добавление колонок. Для этого мы зададим grid-auto-flow равным column . Также уменьшим количество явно заданных колонок до двух. В этом примере в последней ячейке пропишем текст FF.
Хочу заметить важную вещь, это то что ячейки выстраиваются вдоль колонок, а не строк. A и B в первой колонке, C и D во второй и т.д.
Как видим, третья колонка добавилась автоматически и ее ширина формируется на основе контента в самой широкой ячейке. Давайте укажем ширину для этой колонки.
Получаем уже привычный нашему глазу грид.
Функция repeat()
Эта функция позволяет сокращать объявление колонок и строк в случае повторяющихся значений.
Например у нас есть такой код.
Используя функцию repeat мы можем переписать наш код следующим образом.
Функция minmax(), auto-fill и auto-fit
Рассмотрим пример с использованием этой функции.
Запись minmax(120px, 1fr) означает, что минимальный размер столбца равен 120px, а максимальный — 1fr.
auto-fill делает наш грид адаптивным, то есть в нем элементы меняют свои позиции с тем, как мы меняем размер окна браузера.
Ширина окна браузера 450px:
Ширина окна браузера 300px:
Ширина окна браузера 200px:
auto-fit в многострочных гридах по своему действию похож на auto-fill . Разница проявляется в однострочных гридах. С auto-fit пустые полосы сжимаются до нуля, т.е. они как будто исчезают.
Чтобы показать разницу, рассмотрим следующие примеры:
С auto-fill у нас три колонки
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
С auto-fit пустая колонка исчезает
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
Свойства grid-template-areas, grid-area
Есть разные способы создания грид-ячеек и грид-областей. Один из способов — это использование грид-линий, за это отвечают свойства grid-column-start , grid-column-end , grid-row-start и grid-row-end . При таком подходе код довольно сложно читать и в случае серьезного изменения макета, придется переписывать большой объем кода. Поэтому мы рассмотрим второй способ — использование grid-template-areas и grid-area .
Для начала отредактируем наш html-код и используем в нем семантические теги.
C помощью grid-area зададим псевдонимы для наших блоков.
С помощью grid-template-areas определим шаблон страницы.
У нас получился грид 3×4 (3 колонки, 4 ряда). Также у нас есть 6 грид-областей.
Мы можем изменить шаблон просто изменив грид-области в grid-template-areas .
Это делается легко и быстро. Давайте попробуем.
Вот и все, мы изменили шаблон, потратив минимум времени!
В качестве заключения хотелось бы сказать, что в данном руководстве не ставилась цель охватить все аспекты CSS Grid Layout, эта тема довольно обширная. Мы рассмотрели основы теории и примеры, которые помогут начать работу с гридами.
Grid Layout – основа основ веб-дизайна, это вам любой верстальщик скажет. А вот модуль CSS Grid представляет собой простой и в то же время мощный инструмент для создания сайта. Я считаю, что это намного лучше, чем, например, Bootstrap. В этом году у модуля также появилась встроенная поддержка популярных браузеров (Safari, Chrome, Firefox, Edge), поэтому любой веб-разработчик в любом случае столкнется с этой технологий, будь то сейчас или позже.
В этой статье мы затронем основные элементы. Поехали!
Двумя основными компонентами CSS Grid являются обертка (parent) и элементы (children). Обертка – это сетка, внутри которой как раз и содержатся все элементы.
Вот пример разметки для parent с шестью children:
Теперь предоставляем обертке div отображение сетки:
Да, сейчас это не работает, но только потому, что еще не определили вид нашей сетки. Пока 6 div просто располагаются друг над другом:
Здесь также добавлены стили, но пусть они вас не путают: стили и CSS эффекты никак не соприкасаются с нашей темой.
Давайте определим столбцы и строки, чтобы создать двухмерность. Пусть это будет 2 строки и 3 столбца. Для этого обратимся к grid-template-column и grid-template-row:
Мы указали, что у grid-template-columns три значения, следовательно получим столько же столбцов. Аналогичная ситуация со строками: 2 значения в grid-template-rows – это две строки. Наши строки будут задавать ячейкам ширину в 50px, а столбцы – длину в 100px. Имеем следующую разметку:
Давайте проверим, правильно ли вы поняли связь значений и вида нашей сетки. Обратимся к следующему примеру:
Постарайтесь нарисовать это в уме. Выглядит вторая разметка так:
А вот размещение элементов в сетке – это уже задача посложнее. Нужно очень хорошо представлять, как это все будет выглядеть. Например, создадим сетку 3х3, пользуясь той же разметкой, что и раньше:
Это создаст следующий макет:
Беда в том, что мы видим вариант сетки 3х2, тогда как определяли ее как 3х3. Все потому, что у нас изначально только 6 элементов для заполнения, поэтому еще одну строку мы попросту не видим. Чтобы она стала видимой, нам нужно добавить еще 3 дополнительных элемента.
Чтобы изменить размер или позиционировать элементы, мы воспользуемся их свойствами grid-row и grid-column:
Мы выставляем условие, при котором item1 должен начинаться уже в первой линии и заканчиваться в 4-ом столбце. Таким образом, item1 займет всю первую строку, и мы получим следующую разметку:
Наверное, вас терзает вопрос, почему мы указали в коде 4 столбца, когда у нас их 3? Ну тут все просто: мы говорим не о середине этих столбцов, а о закрывающих их линиях. Посмотрите на следующее изображение, чтобы понять:
Теперь мы работаем со всеми строками в сетке, которые нам видны. Грубо говоря, первый элемент, занявший всю строку, сдвинул последующие вниз, чем и заполнил все данные в условии строки.
Но на этом интересные возможности CSS Grid не заканчиваются. Вот более лаконичный и удобоваримый синтаксис примера выше:
Давайте посмотрим, насколько правильно вы поняли суть наших манипуляций с разметкой. Перестраиваем содержимое:
И вот что получаем в итоге. Подумайте, каким образом мы сделали сетку такой:
Читайте также: