БОГДАН ОТВОДЕНКО FRONT-END DEVELOPER

1. CSS Grid Layout
Bogdan Otvodenko
Front-end developer with 5+ years of expirience
PDFfiller

2. Confidential. All rights reserved. Valtech Solutions, Inc.
Предпосылки появления CSS Grid

3. 1. display: table ;
2. Floats ;
3. Inline-block ;
4. Абсолютное и относительное позиционирование
5. 100500+ frameworks
Вёрстка макетов. Раньше и сейчас

4. 1. Flexbox
https://drafts.csswg.org/css-flexbox/
1. СSS Grid
2. https://drafts.csswg.org/css-grid/
3. Box Aligment
4. https://drafts.csswg.org/css-align/
На что нам расчитывать ?

5. Confidential. All rights reserved. Valtech Solutions, Inc.
Какие задачт решает
CSS Grid и что это?

6. 01
https://www.w3.org/TR/css3-grid-layout/
Поддержка браузерами CSS Grid

7. Немного терминологии

8. Grid line

9. Grid line
Grid track

10. Grid cell

11. Grid cell
Grid area

12. Grid cotainer
<div class=”container”>
.......
</div>

13. Grid item
<div class=”container”>
<div class=”container__item”>
<div class=”container__item”>
<div class=”container__item”>
<div class=”container__item”>
<div class=”container__item”>
</div>

14. .container {
disaply: grid;
}

15. .container {
disaply: grid;
grid-template-columns: 1fr 1fr 1fr;
}

16. .container {
disaply: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
grid-column-gap;
grid-row-gap;

17. .container {
disaply: grid;
grid-template-columns: 1fr 2fr 3fr;
grid-gap: 20px;
}
fr, px, %, em ...

18. .container {
disaply: grid;
grid-template-columns: 800px 1fr 2fr;
grid-gap: 20px;
}
fr, px, %, em ...

19. .container {
disaply: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
fr, px, %, em ...

20. .container {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr);
}

21. Окей, а как из этого построить лейаут?

22. И схо д н ы е
бл о к и

23. И схо д н ы е
бл о к и
.container__item:first-child,
.container__item:last-child {
grid-column: 1 / 4;
}

24. И с хо д н ы е
бл о к и
.container__item:first-child {
grid-column: 1 / 4;
}
.container__item:last-child {
grid-column: 1 / 4;
}

25. .container__item:first-child {
grid-column: 1 / 4;
grid-row: 3 / 4
}
.container__item:last-child {
grid-column: 1 / 4;
grid-row: 1 / 2
}

26. .container__item:first-child {
grid-area: 3 / 1 / 4 / 4;
grid-row-start: 3;
grid-column-start: 1;
grid-row-end: 4;
grid-column-end: 4
}
.container__item:last-child {
grid-area: 1 / 1 / 2 / 4;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 4;
}

27. &__item {
border:1px solid #333;
background: tomato;
&:nth-child(1){grid-area: 1 / 1 / 3 / 2;}
&:nth-child(2){grid-area: 1 / 2 / 2 / 3;}
&:nth-child(3){grid-area: 2 / 2 / 3 / 3;}
&:nth-child(4){grid-area: 1 / 3 / 2 / 5;}
&:nth-child(5){grid-area: 1 / 5 / 2 / 7;}
&:nth-child(6){grid-area: 3 / 1 / 4 / 3;}
&:nth-child(7){grid-area: 2 / 3 / 4 / 5;}
&:nth-child(8){}
&:nth-child(9){}
&:nth-child(10){grid-area: 3 / 5 / 4 / 7;}
}

28. Flex vs Grid

30. Вопросы?