Grid

Спецификация      Поддержка браузерами

Hands on the orange typewriter in a park

Grid

Grid - это двухмерная система компоновки сайта на основе сетки колонка/column - ряд/-row.

layout

Принцип построения макета

  1. Определяем контейнер
    .container { display: grid; }
  2. Задаем колонки и стобцы
    .container {
    grid-template-columns: ...;
    grid-template-rows: ... ; }
  3. Помещаем элементы контейнера по своим местам
    .item {
    grid-column: ...;
    grid-row: ...; }

Основные термины:

контейнер container блок со свойством display: grid;

элемент item - прямой потомок контейнера.

layout

<div class="container">
  <div class="item"></div>   <div class="item"></div> </div>

CSS свойства grid относятся либо к container, либо к item.

Основные термины:

line разделяющая линия

track пространство
между смежными линиями

gap промежуток
между колонками и стобцами

layout

Основные термины:

cell наименьшая неделимая
единица контейнера

area пространство, вмещаюещее
одну ячейку и более

layout

Dispalay: grid || inline-grid

grid

1
2
3
4
5
6

inline-grid

1
2
3
4
5
6

.container{ width: (if inline-grid => content, if grid => width of parent) }

Grid-template-columns:

Grid-template-rows:

указывают количество tracks, задавая

  1. размер track
  2. имя линий, образующих track

Далее рассматриваем только Grid-template-columns,
т.к. Grid-template-rows использует те же правила.

Grid-template-columns:

/* задаем 3 колонки */

200px 200px 200px

1fr 1fr 1fr

repeat(3, 1fr)

[line1] 200px [line2] 200px [line3] 200px [line4]

Пример:    

Ссылки:      Line-based placement     named grid lines

Grid-template-columns:

/* автозаполнение */

repeat(auto-fill, 200px)

repeat(auto-fill, minmax(200px, 33%))

repeat(auto-fill, minmax(200px, 1fr))

fit-content(30%) fit-content(40%) fit-content(30%)

Пример:    

Grid-auto-columns:

/* для неявно заданного track,
например для текста без обертки в container */

min-content;      ||     max-content;

100px      ||     10%      ||     10rem

0.8fr

minmax ()

fit-content()

Justify-items / rows / :

Расположение контента внутри ячейки ПО ГОРИЗОНТАЛИ

start || end || center || stretch

justify-item

Расположение контента: пример

Align-items / column

Расположение контента внутри ячейки по вертикали

start || end || center || stretch

align-items

Расположение контента: пример

Place-items: align-items / justify-items

Расположение контента внутри ячейки по вертикали и горизонтали

start || end || center || stretch auto || normal || flex-start || flex-end || self-start || self-end || left || right || baseline || first baseline || last baseline

Подробнее

Justify-content / rows / :

Расположение ячеек внутри контейнера по горизонтали .

И свойства Justify-content и Align-content управляют размещением ячеек.

start || end || center || stretch || space-around || space-between || space-evenly

justify-content

Расположение контента: пример

Если размеры ячеек заданы абсолютными, а не относительными единицами, то может появиться свободное пространство. Управление положением ячеек в пределах контейнера определяют свойства justify-content и align-content

Align-content / column / :

start || end || center || stretch || space-around || space-between || space-evenly

align-content

Расположение контента: пример

Если размеры ячеек заданы абсолютными, а не относительными единицами, то может появиться свободное пространство. Управление положением ячеек в пределах контейнера определяют свойства justify-content и align-content

Place-content: align-content / justify-content

start || end || center || stretch flex-start || flex-end || left || right || space-between || space-around || space-evenly || baseline || first baseline || last baseline

Подробнее

Grid Items

в качестве значений могут быть

  1. номера или имена линий
  2. span (число) - количество объединенных ячеек
  3. span (имя линии) - объединение ячеек до указанной линии
  4. auto

Grid Items

сокращенная запись (через / )

  1. номера или имена линий
  2. span (число) - количество объединенных ячеек
  3. span (имя линии) - объединение ячеек до указанной линии
  4. auto

Пример: grid-column: 1 / span 2;
grid-row: 1 / span 3; ;

Areas

Conainer - grid-template-areas:
Items - grid-areas:

Пример: .container {
    grid-template-areas: "header header header header"
    "nav main main aside"
    "footer footer footer footer"; }
.item-header { grid-area: header; }
.item-nav { grid-area: nav; }
.item-main { grid-area: main; }
.item-aside { grid-area: aside; }
.item-footer { grid-area: footer; }

Сетка 12-колонок на основе grid

Пример

12 колонок

Галереи на основе grid

Пример

12 колонок

Спасибо за внимание!