Справочник DESIGN/HTML/CSS

CSS-Grids (Tutorial)

Флексбокс имеет одновременно только одно измерение в разметке (или строки, или колонки).

CSS-гриды имеют одновременно два измерения (и строки, и колонки).

Columns

Разметка количества колонок и ширины (px, %, fr) и

<div class="grid-wrapper">
  <div> ... </div>
  ...
  <div> ... </div>
</div>
.grid-wrapper {
  display: grid;
  grid-template-columns: 20% 80%;

  // shortcut
  grid-template: grid-template-columns / grid-template-rows;
}
1
2

3 colums

.grid-wrapper {
  display: grid;
  grid-template-columns: 20% 30% 50%;
}
1
2
3

Auto break - когда элементов много

.grid-wrapper {
  display: grid;
  grid-template-columns: 20% 30% 50%;
}
1
2
3
4
5
6

Rows

Задаём высоту рядов (1 и 2-му рядам)

.grid-wrapper {
  display: grid;
  grid-template-columns: 20% 20% 60%;;
  grid-template-rows: 50px 100px;
 }
1
2
3
4
5
6
7
8
9
10
11
12

Высота по умолчанию

.grid-wrapper {
  display: grid;
  grid-template-columns: 20% 20% 60%;;
  grid-template-rows: 50px 100px;

  // fix
  grid-auto-rows: 30px;
  // adaptive (можно и колонкам)
  grid-auto-rows: minmax(50px, auto);
 }
1
2
3
4
5
6
7
8
9
10
11
12

Gaps

Columns-gap

.grid-wrapper {
  display: grid;
  grid-template-columns: 20% 30% 50%;
  grid-column-gap: 15px;
}
1
2
3
4
5
6

Rows-gap

.grid-wrapper {
  display: grid;
  grid-template-columns: 30% 30% 40%;
  grid-row-gap: 15px;
}
1
2
3
4
5
6

Multi-gap - shortcut

.grid-wrapper {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-gap: 15px 5px;
}
1
2
3
4
5
6

Fractions - fr

Adaptive layout

.grid-wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 2fr 1fr 2fr 1fr;

  // or with repeat
  grid-template-columns: repeat(2, 2fr 1fr);
}
1
2
3
4
5
6

Flow

Change order - при переполнении появляется доб. колонка

.grid-wrapper {
  display: grid;
  grid-template-columns: minmax(10px, 50px) 1fr 1fr;
  grid-template-rows: 25px 25px 25px;
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 5px;
  grid-auto-flow: column;
}
1
2
3
4
5
6
7
8
9
10

Auto-fill и Auto-fit

Колонки будут перераспределяться при уменьшении размера окна

.grid-wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}
1
2
3
4
5
6
7
8
9
10

Позиционирование отдельных элементов

Колонки будут перераспределяться при уменьшении размера окна

.grid-wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(3, 1fr);
}

.grid-wrapper > div:nth-child(1) {
  // -1 - full-column
  grid-column-start: 1
  grid-column-end: 3
  grid-column: 1 / 3;
  grid-row-start: 1
  grid-row-end: 3
  grid-row: 1 / 3;

  // shortcut
  grid-area: 1 / 1 / 3 / 3;
}
1
2
3
4
5
6
7
8
9
10

Template areas

Кастомная сетка

<div class="grid">
  <header></header>
  <aside></aside>
  <main></main>
  <footer></footer>
</div>
.grid {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 2fr, 4fr;
  grid-template-areas:
    "header ."
    "aside main"
    "footer main"
  ;
}

header {
  grid-area: header;
}

aside {
  grid-area: aside;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

1
2
3
4
5
6
7
8
9

Растяжение отдельных блоков

Свойства как у flexbox

.grid-wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(3, 1fr);

  // выравнивание по горизонтали
  justify-items: stretch* | start | center | end;


  // выравнивание по вертикали
  align-items: stretch* | start | center | end;
}

.grid-wrapper > div:nth-child(1){
  align-self: stretch* | start | center | end;
  justify-self: stretch* | start | center | end;
}
1
2
3
4
5
6
7
8
9
10