3.81M

Category:

internet

3-2-CSS-Grid

1.

Тема: «CSS Grid»
Вопросы:
1. Что такое CSS Grid?
2. Архитектура CSS Grid»
3. Схема CSS Grid
4. Свойства Grid-контейнера
5. Свойства Grid-элементов
6. Сокращения для свойств CSS Grid

Вопрос 1: «Что такое CSS Grid?»
Свойства CSS Grid позволяют создавать адаптивные или отзывчивые макеты вебстраниц.
Grid— это макет для сайта (его схема, проект).
Grid позволяет размещать контент сайта (располагать его определенным образом,
позиционировать).
Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на
различных устройствах. Это означает, что сайт будет одинаково хорошо смотреться на
компьютере, телефоне и планшете.
Структура grid напоминает обычный Excel-файл: есть горизонтальные и вертикальные
линии, которые вместе образуют много разных ячеек. Внутри ячеек находятся
элементы сайта: текст, картинки, кнопки, блоки HTML-кода и так далее.

3.

Вопрос 2: «Архитектура CSS Grid»
Формально все эти части grid-разметки называются так:
grid-контейнер — самый главный элемент во всей разметке, в нём хранится всё содержимое
сетки;
grid-ячейка — единица grid-сетки, сюда можно положить один или несколько блоков кода;
grid-линия — горизонтальная или вертикальная линия, разделяющая столбцы и колонки;
grid-строка (row) — ряд ячеек;
grid-столбец (column) — колонка ячеек;
grid-элемент — какой-либо элемент сайта;
grid-область (area) — пространство из ячеек,
в CSS можно объединить несколько ячеек
в одну и работать с ними как с единым целым.

4.

Вопрос 2: «Архитектура CSS Grid»
Как работает Grid?
Элементы Grid (grid items) располагаются вдоль главной или основной
(main) и поперечной (cross) оси (axis).
При помощи различных свойств мы можем манипулировать
элементами для создания макетов.
Схема содержит свойства, предоставляемые Grid.
Эти свойства делятся на:
родительские (свойства grid-контейнера)
дочерние (свойства grid -элементов)
Обратите внимание: красным цветом отмечены сокращения для
свойств:

5.

Вопрос 3: «Схема CSS Grid»
Отношения между родительским и дочерними элементами.
Свойства родительского элемента определяются в .container,
а свойства дочерних элементов — в .A
Объявим саму сетку. В файл style.css поместим такой код:

6.

Вопрос 3: «Схема CSS Grid»
Чтобы сетку было видно, добавим ей стили:
контейнер обведём зелёным цветом, а все
элементы внутри него — чёрной штрихпунктирной линией.
Должно получиться примерно так:

7.

Вопрос 4: «Свойства Grid-контейнера»
grid-template-columns
Данное свойство используется для определения количества
и ширины колонок.
При этом, можно определять как свойства для каждой
колонки в отдельности, так и устанавливать ширину всех
колонок с помощью функции repeat()
Чтобы создать колонки, нужно просто записать их размеры через пробел.
Размеры можно указывать в разных единицах измерения: пикселях, процентах, сантиметрах
и так далее.
Причём можно смешивать несколько единиц в пределах одного свойства.

8.

Вопрос 4: «Свойства Grid-контейнера»
grid-template-columns
Допустим, нам нужно создать три колонки:
первая занимает одну треть экрана
вторая — ровно 100px
третья — всё оставшееся место.
Общая ширина всех колонок превышает 100%, и третья
колонка уедет за пределы контейнера
Чтобы избегать таких ситуаций, grid придумали новую единицу измерения — фракцию (fr). Она
позволяет разделить свободное пространство экрана на несколько частей и не возиться
с ручной подгонкой процентов.

9.

Вопрос 4: «Свойства Grid-контейнера»
grid-template-columns
первому столбцу отдаём одну часть свободного пространства (1fr)
третьему — две (2fr)
столбец посередине, пускай забирает 100px:
Результат:

10.

Вопрос 4: «Свойства Grid-контейнера»
grid-template-columns
Обратите внимание:
значения в пикселях будут точными
ключевое слово auto означает заполнение элементом
всего доступного пространства
использование единицы fr (фракция) в repeat() означает,
что все контейнеры будут иметь одинаковую ширину
Style.css:

11.

Вопрос 4: «Свойства Grid-контейнера»
grid-template-rows
Данное свойство используется для определения количества
и высоты строк.
При этом, можно определять как высоту каждой колонки в
отдельности, так и устанавливать высоту всех строк с
помощью функции repeat()
Изменим строку в style.css:

12.

Вопрос 4: «Свойства Grid-контейнера»
grid-template-rows
Зададим табличке размеры строк:
Размеры двух строчек повторяются — они занимают ровно 2fr.
Чтобы не писать дважды одно и то же, поместим их в функцию repeat. Она принимает на вход
два параметра — размер строки во фракциях и количество его повторений:
Результат:

13.

Вопрос 5: «Свойства Grid-элементов»
Рассмотрим функцию repeat()
Доступное пространство разделено на 12 равных частей как по ширине, так и по высоте.
1 контейнер занимает 1 часть или фракцию. В данном случае 8 фракций остались
невостребованными.

14.

Вопрос 4: «Свойства Grid-контейнера»
grid-template-rows
И полная, и краткая запись уместны — их можно чередовать в зависимости от контекста.
Например, в нашем случае без функции можно было бы обойтись — но если надо создать,
допустим, 10 колонок, она помогла бы сделать код более лаконичным и читаемым.
Обратите внимание: высоту последней строчки E мы нигде не указывали, поэтому она
остаётся дефолтной.

15.

Вопрос 4: «Свойства Grid-контейнера»
grid-template-areas
Одна из особенностей grid-разметки — возможность создавать области и гибко регулировать
их размеры.
Данное свойство используется для определения количества
пространства, занимаемого ячейкой Grid (grid cell), в терминах
колонок и строк, в родительском контейнере.

16.

Вопрос 4: «Свойства Grid-контейнера»
grid-template-areas
Чтобы создать область, объявим для каждого элемента в CSS-файле
свойство grid-area — его параметром может быть любое имя (f).
Затем в grid-контейнере создаём «матрицу» из этих имён:

17.

Вопрос 4: «Свойства Grid-контейнера»
grid-template-areas
Как это работает.
Каждое имя в grid-templateareas соответствует определённому объекту.
Одинаковые имена, стоящие рядом,
собирают несколько ячеек в единое целое —
то есть в grid-область:
Элемент A с «псевдонимом» f занимает область в 25 ячеек.
Элемент B (i) — в 9 ячеек.
Элемент C (b) — в 4 ячейки.
Элемент D (o) — в 1 ячейку.
Элемент E (n) — тоже в 1 ячейку.

18.

Вопрос 4: «Свойства Grid-контейнера»
grid-template-areas
Схема макета:
Для получения результата требуется не только родительское, но и хотя бы одно дочернее
свойство:
grid-template-areas: родительское свойство, создающее схему
grid-area: дочернее свойство, которое использует схему
Создаем схему
применяем схему

19.

Вопрос 4: «Свойства Grid-контейнера»
Используя grid-gap, можно регулировать интервалы между элементами в контейнере.
Делается это с помощью двух параметров:
column-gap — расстояние между колонками;
row-gap — расстояние между строками.
У gap есть сокращённая запись, где параметры column-gap и row-gap можно записать через
пробел:

20.

Вопрос 4: «Свойства Grid-контейнера»
column-gap
Данное свойство используется для добавления отступа
между колонками.
Style.css:
Обратите внимание: свойство column-gap используется совместно со свойством gridtemplate-columns

21.

Вопрос 4: «Свойства Grid-контейнера»
row-gap
Данное свойство используется для добавления отступов
между строками.
Style.css:
Обратите внимание: свойство row-gap используется совместно со свойством grid-templaterows

22.

Вопрос 4: «Свойства Grid-контейнера»
justify-items
Данное свойство используется для позиционирования gridэлементов внутри grid-контейнера вдоль главной оси.
Оно принимает 4 возможных значения:
Style.css:

23.

Вопрос 4: «Свойства Grid-контейнера»
justify-items
Свойство выравнивает элементы в пределах области по горизонтали.

24.

Вопрос 4: «Свойства Grid-контейнера»
align-items
Данное свойство используется для
позиционирования grid-элементов внутри gridконтейнера вдоль поперечной оси.
Оно принимает 4 возможных значения:
Style.css:

25.

Вопрос 4: «Свойства Grid-контейнера»
align-items
Свойство выравнивает элементы в пределах области по вертикали.

26.

Вопрос 4: «Свойства Grid-контейнера»
justify-content
Данное свойство используется для позиционирования
самого grid внутри grid-контейнера вдоль основной оси.
Оно принимает 7 возможных значений:
Style.css:

27.

Вопрос 4: «Свойства Grid-контейнера»
justify-content
Свойство выравнивает элементы
в пределах всего контейнера
по горизонтали.

28.

Вопрос 4: «Свойства Grid-контейнера»
align-content
Данное свойство используется для позиционирования
самого grid внутри grid-контейнера вдоль поперечной
оси.
Оно принимает 7 возможных значений:
Style.css:

29.

Вопрос 4: «Свойства Grid-контейнера»
align-content
Свойство выравнивает элементы в пределах всего контейнера по вертикали.
Элементы растянулись по длине контейнера
Применим к нему следующие свойства

30.

Вопрос 5: «Свойства Grid-элементов»
Шкала CSS Grid
С помощью этих свойств можно прямо указать браузеру, где должны находиться
элементы.
Для этого нужно указать две точки:
с какой линии элемент начинается и какой заканчивается — это работает как
по горизонтали, так и по вертикали.

31.

Вопрос 5: «Свойства Grid-элементов»
Шкала CSS Grid
Данная шкала показывает, как вычисляются строки и колонки
при их объединении
Для этого используется два вида единиц:
целые числа (1, 2, 3 и т.д.)
ключевое слово span
На представленной иллюстрации показаны начальные и
конечные точки строк и колонок в одной ячейке:

32.

Вопрос 5: «Свойства Grid-элементов»
grid-columns: start/end
Данное свойство позволяет объединять колонки.
Оно является сокращением для:
grid-column-start
grid-column-end

33.

Вопрос 5: «Свойства Grid-элементов»
grid-columns: start/end
Каждый класс .box-* по умолчанию имеет
такой масштаб (scale):
Это можно переписать с помощью ключевого
слова span:
Давайте "присвоим" 8 фракций .box-1:

34.

Вопрос 5: «Свойства Grid-элементов»
grid-columns: start/end
Как мы производим вычисления?
box-1 занимает 1 часть. Кроме этого, к ней добавляется еще 8
частей. И еще 1 в конце. Получается: 8 + 1 + 1 = 10.
Как использовать ключевое слово span
Считается, что использование span делает код более читаемым.
В этом случае нам просто нужно добавить к box-1 8 частей:

35.

Вопрос 5: «Свойства Grid-элементов»
grid-row: start/end
Данное свойство позволяет объединять строки.
Оно является сокращением для:
grid-row-start
grid-row-end

36.

Вопрос 5: «Свойства Grid-элементов»
grid-row: start/end
Добавим к box-1 9 частей:
Расчет выглядит так:
box-1 занимает 1 часть + 9 частей + 1 часть
в конце, получается 9 + 1 + 1 = 11.
Вриант со span:

37.

Вопрос 5: «Свойства Grid-элементов»
Общее свойство, объединяющее все четыре основных:
Зададим эти свойства первым трём элементам из нашей конструкции
с буквами:
Этот код указывает нашим буквам, какие позиции занять в сетке:
Элемент А занял область от первой до четвёртой линии —
и по горизонтали, и по вертикали.
Элемент B занял область от четвёртой до шестой линии
по горизонтали и от первой до третьей по вертикали.
Элемент С занял область от четвёртой до пятой
линии по горизонтали и от третьей до четвёртой
линии по вертикали
Остальные расположились по дефолту :)

38.

Вопрос 5: «Свойства Grid-элементов»
justify-self
Данное свойство используется для позиционирования
отдельного grid-элемента вдоль основной оси.
Оно принимает 4 возможных значения:

39.

Вопрос 5: «Свойства Grid-элементов»
align-self
Данное свойство используется для позиционирования
отдельного grid-элемента вдоль поперечной оси.
Оно принимает 4 возможных значения:

40.

Вопрос 6: «Сокращения для свойств CSS Grid»
place-content
place-items
place-self
grid-template
gap / grid-gap

41.

Вопрос 6: «Сокращения для свойств CSS Grid»
place-content
Данное свойство является сокращением
для:
align-content
justify-content

42.

Вопрос 6: «Сокращения для свойств CSS Grid»
place-items
Данное свойство является сокращением
для:
align-items
justify-items

43.

Вопрос 6: «Сокращения для свойств CSS Grid»
place-self
Данное свойство является сокращением
для:
align-self
justify-self

44.

Вопрос 6: «Сокращения для свойств CSS Grid»
grid-template
Данное свойство является сокращением
для:
grid-template-rows
grid-template-columns

45.

Вопрос 6: «Сокращения для свойств CSS Grid»
grid-template
Свойство grid-template позволяет в краткой форме определить или столбцы со строками, или
целые области.
Короткая форма для grid-строк и grid-колонок:
Мы всего одной строчкой создаём целую таблицу — просто записываем через слеш
количество рядов и столбцов.
Для примера создадим сетку из трёх строк
по 1fr и двух столбцов по 2fr.