Презентация "CSS верстка. CSS GRID"

CSS-ВЕРСТКА

CSS GRID

CSS GRID

• CSS Grid это новая модель шаблона, оптимизированная для двумерных шаблонов
• Grid модуль в CSS был разработан CSS Working Group для того, чтобы предоставить наилучший способ создания шаблонов в CSS.
• Он попал в Candidate Recommendation в феврале 2017 года, а основные браузеры начали его поддержку в марте 2017 года.
• CSS Grid Layout - самая мощная система компоновки из доступных на данный момент в CSS.

CSS GRID

• CSS Grid включают в себя интуитивный «ASCII-

графический» синтаксис, в котором можно виртуально

«видеть» шаблон в коде, поэтому становится легко создавать и изменять шаблон.

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

CSS GRID

Поддержка браузерами

• IE: 10.0 -ms-

Edge: 16.0, 12.0 -ms-

Firefox: 52.0

Chrome: 57.0

Safari: 10.1

Opera: 44.0

iOS Safari: 10.3

Opera Mini: —

Android Browser: 67.0

Chrome for Android: 70.0

КОНЦЕПЦИЯ СЕТКИ И ОСНОВНЫЕ ПОНЯТИЯ КОНЦЕПЦИЯ СЕТКИ И ОСНОВНЫЕ ПОНЯТИЯ

• Сетка (grid) представляет собой набор пересекающихся горизонтальных и вертикальных линий, делящих

пространство grid-контейнера на области сетки, в которые могут быть помещены элементы сетки.

• Контейнер Grid: родительский контейнер, в котором определяется отображение сетки
• Элементы сетки: прямые дети (потомки) сетчатого контейнера

КОНЦЕПЦИЯ СЕТКИ И ОСНОВНЫЕ ПОНЯТИЯ

• Для того чтобы начать работу, нам нужно определить элемент-контейнер с помощью display: grid,
• настроить размеры колонок и строк с

помощью grid-template-columns и grid-template- rows,

• разместить его дочерние элементы внутри сетки с помощью grid-column и grid-row.

КОНТЕЙНЕР-СЕТКА

Элемент к которому применяется display: grid. Это прямой родитель для всех элементов сетки.

Класс container является контейнером сетки.

СВОЙСТВА ДЛЯ РОДИТЕЛЬСКОГО ЭЛЕМЕНТА (КОНТЕЙНЕРА СЕТКИ)

display

• Определяет элемент как контейнер и устанавливает новый контекст форматирования сетки для его содержимого.

Значения:

• grid - формирует сетку как блок;
• inline-grid - формирует сетку как инлайновый блок;
• subgrid - если контейнер это ещё и элемент (вложенная сетка), то

можно использовать это свойство для обозначения того, чтобы

размеры строк/колонок были взяты из родительского элемента, а не определяли собственный

grid-template-columns grid-template-rows

СВОЙСТВА ДЛЯ РОДИТЕЛЬСКОГО ЭЛЕМЕНТА (КОНТЕЙНЕРА СЕТКИ)

• Определяет колонки и строки сетки с помощью списка значений разделённого пробелами. Значения представляют из себя размер тре
• ка, а пробелы между ними представляют линии сетки.

Значения:

<track-size> - может быть фиксированным размером,

процентами или частью свободного пространства в сетке (определяется с помощью единицы fr (fraction));

<line-name> - произвольное имя на ваш выбор;

Относительные, абсолютные единицы и процентные значения для определения дорожек сетки (длина)

СВОЙСТВА ДЛЯ РОДИТЕЛЬСКОГО ЭЛЕМЕНТА (КОНТЕЙНЕРА СЕТКИ)

• Размеры дорожек сетки можно задавать с помощью положительных значений, используя относительные единицы длины — например, em, vh, vw; абсолютные единицы длины — px; и проценты %. Размеры в %

вычисляются от ширины или высоты контейнера-сетки.

Гибкие размеры дорожек

СВОЙСТВА ДЛЯ РОДИТЕЛЬСКОГО ЭЛЕМЕНТА (КОНТЕЙНЕРА СЕТКИ)

fr — единица длины, которая позволяет создавать гибкие дорожки. (позволяет настраивать размер треков как часть свободного

пространства в контейнере.)

* Свободное пространство высчитывается после вычисления всех фиксированных элементов

РАЗМЕЩЕНИЕ И ПЕРЕУПОРЯДОЧИВАНИЕ ЭЛЕМЕНТОВ СЕТКИ

• Свойства размещения позволяют свободно упорядочивать и переупорядочивать содержимое сетки таким образом, что визуальное представление может значительно отличаться от порядка элементов в html-документе.

РАЗМЕЩЕНИЕ И ПЕРЕУПОРЯДОЧИВАНИЕ ЭЛЕМЕНТОВ СЕТКИ

Свойства размещения на сетке

grid-row-start, grid-row-end, grid-column-start grid-column-end

и их краткая запись grid-row, grid-column и grid-area позволяют

определить размещение элемента сетки, предоставив любую из следующих шести частей информации:

	Строка	Столбец
Начало	Начальная линия строки	Начальная линия столбца
Конец	Конечная линия строки	Конечная линия столбца
Диапазон	Диапазон строк	Диапазон столбцов

РАЗМЕЩЕНИЕ И ПЕРЕУПОРЯДОЧИВАНИЕ ЭЛЕМЕНТОВ СЕТКИ РАЗМЕЩЕНИЕ И ПЕРЕУПОРЯДОЧИВАНИЕ ЭЛЕМЕНТОВ СЕТКИ grid-template-areas

• Определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area. Повторение названия
области приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис предоставляет визуализацию структуры сетки. Значения: <grid-area-name> - имя области заданное с помощью grid-area; . - точка обозначающая пустую ячейку; none - области не определены;

РАЗМЕЩЕНИЕ И ПЕРЕУПОРЯДОЧИВАНИЕ ЭЛЕМЕНТОВ СЕТКИ

Создана сетка из 4 колонок и 3 строк. Вся верхняя строка будет состоять из области header. Строка посередине будет состоять из области main, занимающей две колонки, пустой ячейки и области sidebar, которая занимает одну колонку.

Последняя строка будет состоять только из области footer.