Содержание
- 2. CSS Grid Layout (aka "Grid") Copyright © 2007-2018 ALTEXSOFT
- 3. Copyright © 2007-2018 ALTEXSOFT
- 4. Browser support Copyright © 2007-2018 ALTEXSOFT
- 5. Concepts and Terminology Copyright © 2007-2018 ALTEXSOFT
- 6. Grid Lines Copyright © 2007-2018 ALTEXSOFT .grid{ display: grid; grid-template-columns: 300px 200px 100px; grid-template-rows: 100px 50px;
- 7. Grid Lines Properties for the Grid Items: Grid-column-start Grid-column-end Grid-row-start Grid-row-end Shorthands: Grid-column: Grid-row: Grid-area: Copyright
- 8. Grid Lines Copyright © 2007-2018 ALTEXSOFT Grid Item .grid-item{ grid-column: 2 / 4; grid-row: 1 /
- 9. Grid Lines Copyright © 2007-2018 ALTEXSOFT Cell Coverage …key word
- 10. Grid Lines Negative line numbers Copyright © 2007-2018 ALTEXSOFT
- 11. Grid Lines Naming lines when defining a grid Copyright © 2007-2018 ALTEXSOFT .grid{ display: grid; grid-template-columns:
- 12. Grid Track New Fr CSS length (Fraction) Repeat(); Copyright © 2007-2018 ALTEXSOFT grid-template-columns: 1fr 1fr 1fr;
- 13. Grid Track Function minmax(); minmax(min,max); Static length values Dynamic length values The min-content, max-content Copyright ©
- 14. Grid Track Function minmax(); Auto keyword Copyright © 2007-2018 ALTEXSOFT grid-template-columns: minmax(auto, auto) 1fr 1fr; min-content
- 15. Responsive GRID without media queries Auto-fill Auto-fit Copyright © 2007-2018 ALTEXSOFT grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); DEMO
- 16. Grid Area Copyright © 2007-2018 ALTEXSOFT grid-template-areas: "header header header header header" ". . . .
- 17. One-dimensional vs Two-dimensional Copyright © 2007-2017 ALTEXSOFT DEMO
- 18. Summary Advantages: Provide a convenient mechanism for placing content on a virtual grid Clear semantic structure
- 19. Thank you for attention
- 21. Скачать презентацию