Вадим Макеев

Можно вообще всё.Раскладка по гриду

M. C

. Esc

her,

Rela

tivity

2

Template Layout

4

Grid Layout

5

6

Включаем— Opera: opera://flags/#enable-experimental-web-platform-features

— Chrome: chrome://flags/#enable-experimental-web-platform-features

— Firefox: about:config — layout.css.grid.enabled

10

Гриды11

Контейнер

Линия

13

Полоса

15

Ячейка

18

Область

20

Термины— grid container — грид-контейнер

— grid item — грид-элемент

— grid track — грид-полоса

— grid cell — грид-ячейка

— grid line — грид-линия

— grid area — грид-область

Подробнее в словаре терминов по фронтенду.

22

Автоматика

23

sample

sample__item

sample__item

sample__item

sample__item

sample__item

Заготовка<div class=" ">

<div class=" "></div>

<div class=" "></div>

<div class=" "></div>

<div class=" "></div>

<div class=" "></div>

</div>

01.

02.

03.

04.

05.

06.

07.

24

#0175A7

:first-child #090

:last-child #C00

::before counter(list)

Заготовка.sample { /* Пока пусто */ }

.sample__item {

background: ;

}

.sample__item { background: }

.sample__item { background: }

.sample__item { content: }

01.

02.

03.

04.

05.

06.

07.

25

1

2

display: grid;

.sample {

}

01.

02.

03.

27

1

2

Колонки

29

.sample

1fr 1fr

Пополам {

grid-template-columns: ;

}

01.

02.

03.

30

1 2

1 2

3

1 2

3 4

1 2

3 4

5

1 2

3 4

5 6

.sample

1fr 1fr 1fr

На три {

grid-template-columns: ;

}

01.

02.

03.

36

1 2 3

1fr ☛ 1 часть

38

фыр-фыр-фыр

39

.sample

1fr 2fr 3fr

Пропорционально {

grid-template-columns: ;

}

01.

02.

03.

40

1 2 3

.sample

250px 1fr 250px

Фикс и остальное {

grid-template-columns: ;

}

01.

02.

03.

42

1 2 3

Строки

44

.sample

columns 1fr

rows 1fr

Фикс и остальное {

grid-template- : 150px 150px;

grid-template- : 150px 150px;

}

01.

02.

03.

04.

45

1 2 3

4 5 6

7 8 9

Ручник

47

.sample

1fr 1fr 1fr

Три колонки {

grid-template-columns: ;

}

01.

02.

03.

49

1 2 3

4 5

.sample

1 / 4

.sample

1 / 4

Шапка и подвал :nth-child(1) {

grid-column: ;

}

:nth-child(5) {

grid-column: ;

}

01.

02.

03.

04.

05.

06.

51

1

2 3 4

5

.sample

3 / 4

.sample

1 / 2

Подвал и шапка :nth-child(1) {

grid-row: ;

}

:nth-child(5) {

grid-row: ;

}

01.

02.

03.

04.

05.

06.

53

.sample

3 / 1 / 4 / 4

.sample

1 / 1 / 2 / 4

Подвал и шапка :nth-child(1) {

grid-area: ;

}

:nth-child(5) {

grid-area: ;

}

01.

02.

03.

04.

05.

06.

54

1

2 3 4

5

ASCII

Авто

порт

рет!

56

1

2

3

4

5

.sample

'a a a a'

c c

'e e e e'

ASCII {

grid-template-areas:

'b d' /* Шаблон области */

;

}

01.

02.

03.

04.

05.

06.

58

1 a

2 b

3 c

4 d

5 e

A B C D E.sample :nth-child() { grid-area: }

.sample :nth-child() { grid-area: }

.sample :nth-child() { grid-area: }

.sample :nth-child() { grid-area: }

.sample :nth-child() { grid-area: }

01.

02.

03.

04.

05.

59

1

2 3 4

5

1 b

2 a

3 e

4 c

5 d

B A E C D.sample :nth-child() { grid-area: }

.sample :nth-child() { grid-area: }

.sample :nth-child() { grid-area: }

.sample :nth-child() { grid-area: }

.sample :nth-child() { grid-area: }

01.

02.

03.

04.

05.

61

1

2

3

4

5

.sample

'b c c d'

ASCII {

grid-template-areas:

'a a a a'

'e e e e';

}

01.

02.

03.

04.

05.

06.

63

.sample

'b c c d'

'b c c d'

ASCII {

grid-template-areas:

'a a a a'

'e e e e';

}

01.

02.

03.

04.

05.

06.

07.

64

1

2 3 4

5

1

2 3 4

5

.sample {

grid-template-areas:

'� � � �'

'� � � �'

'� � � �';

}

01.

02.

03.

04.

05.

06.

67

Так флексы или гриды?Внешние гриды для общей раскладки, смесь вложенных флексов и гридов для

компонентов страницы и блочные, инлайновые или табличные элементы,

там, где находится текстовое содержимое.

Таб Аткинс, www-style

“68

Ещё? Ещё!— Переводы CSS Live

— Grid by Example

— CSS Grid Layout Examples

— A Complete Guide to Grid

— CSS Grid Polyfill

69

sokr.me/grl

70

@pepelsbey

71

Shower

72

Вопросы?

73