Основы CSS Grid

1.

Основы CSS Grid
CSS Grid - мощный инструмент для создания современных вебстраниц с гибкой и адаптивной версткой.
by Mohammed R akhmatillayev

2.

Что такое CS S Grid?
Мощная модел ь
Гибкость
CSS Grid - модель верстки, которая позволяет легко
Она обеспечивает гибкость в управлении размещением
создавать сложные, двухмерные макеты.
элементов на странице, адаптируясь к различным
размерам экранов.

3.

Основ ные понятия: gridcontainer и grid-items
grid-container
grid-items
Элемент, в котором
Элементы, которые
определена сетка, и внутри
размещаются внутри grid-
которого размещаются
container и образуют
элементы.
структуру сетки.

4.

Определение сетки с помощь ю свойств gridtemplate-columns и grid-template-rows
grid-template-columns
1
2
Определяет ширину колонок сетки.
grid-template-rows
Определяет высоту строк сетки.

5.

Размещение элементов с помощью свойств
grid-column и grid-row
grid-column
1
Определяет положение элемента по колонкам.
grid-row
2
Определяет положение элемента по строкам.

6.

Контрол ь пространства между сетками с помощь ю
свойств grid-gap, grid-column-gap и grid-row-gap
1
grid-gap
2
grid-column-gap
3
grid-row-gap
Определяет размер отступов
Определяет размер отступов
Определяет размер отступов
между элементами сетки.
между колонками.
между строками.

7.

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

8.

Определение шаблонов макетов с помощь ю
свойства grid-template-areas
1
grid-template-areas
Определяет макет сетки, используя именованные области.

9.

Свойства для контроля
выравнивания и расположения
элементов на сетке
1
justify-content
Определяет выравнивание элементов по горизонтали.
2
align-items
Определяет выравнивание элементов по вертикали.
3
align-content
Определяет выравнивание строк сетки.

10.

Практические примеры и демонстрации
возможностей CS S Grid