Downloaded 130 times
![GRID TEMPLATE ROWS Defines the height of the grid rows. grid-template-rows: [row1-start] 224px [row2-start] 224px [end];](https://image.slidesharecdn.com/css-grid-180123160844/75/Introducing-CSS-Grid-11-2048.jpg)
![GRID TEMPLATE AREA Allows you to name sections of the grid. grid-template-columns: 100px auto 200px; grid-template-rows: [row1-start] 224px [row2-start] 224px [end]; grid-template-areas: "header header header" "content content sidebar";](https://image.slidesharecdn.com/css-grid-180123160844/75/Introducing-CSS-Grid-15-2048.jpg)
Uploaded byJason Yingling
Introducing CSS Grid
CSS Grid is a 2-dimensional layout system that manages both rows and columns, supported by all major browsers. Key concepts include grid containers, items, lines, tracks, and areas, with specific rules for defining column and row sizes, gaps, and placements. The document also discusses best practices for fallback support and provides additional resources for learning about CSS Grid.
Introducing CSS Grid
- 1. INTRODUCING CSS GRIDJason Yingling(@jason_yingling)
- 2. WHAT IS CSS GRID CSSGrid is a 2 dimensional layout system that can handle both columns and rows.
- 3. CAN I USE CSSGRID CSS Grid is supported in the latest version of all major browsers and can be safely used with a fallback.
- 4. GRID CONTAINER The grid containeris the parent of all grid items. It is declared with the display: grid; rule.
- 5. GRID ITEM The items thatare direct children of the grid container. These are the elements that will be placed on the grid.
- 6. GRID LINES The lines thatdivide the columns and rows of the grid. These are numbered starting with 1.
- 7. GRID TRACK The space between2 adjacent grid lines. Essentially your columns and rows.
- 8. GRID CELL The space between2 adjacent grid column lines and 2 adjacent grid row lines.
- 9. GRID AREA The space betweenany 4 grid lines. It can cover any number of rows and columns.
- 10. GRID TEMPLATE COLUMNS Defines thewidth of the columns in the grid. grid-template-columns: 100px auto 200px;
- 11. GRID TEMPLATE ROWS Defines theheight of the grid rows. grid-template-rows: [row1-start] 224px [row2-start] 224px [end];
- 12. GRID COLUMN GAP Define thesize of the grid lines between columns. grid-column-gap: 30px;
- 13. GRID ROW GAP Defines thesize of the grid lines between rows. grid-row-gap: 40px;
- 14. GRID GAP Shorthand for rowand column gap. grid-gap: <grid-row-gap> <grid-column-gap>; grid-gap: 40px 30px; Note: The gap is only between columns and rows. Not outside.
- 15. GRID TEMPLATE AREA Allows youto name sections of the grid. grid-template-columns: 100px auto 200px; grid-template-rows: [row1-start] 224px [row2-start] 224px [end]; grid-template-areas: "header header header" "content content sidebar";
- 16. FRACTIONAL (FR) UNITS Grid comeswith the fr unit. Which uses up a fraction of the remaining free space in the grid. grid-template-columns: 1fr 50px 1fr 1fr;
- 17. REPEAT() NOTATION Allows you toeasily repeat settings. grid-template-columns: repeat(12, 1fr);
- 18. GRID COLUMN START Grid ColumnStart / Grid Column End | Grid Column grid-column-start: 2; grid-column-end: 4; Shorthand grid-column: 2 / 4;
- 19. GRID ROW START Grid RowStart / Grid Row End | Grid Row grid-row-start: 1; grid-row-end: 2; Shorthand grid-row: 1 / 2;
- 20.
- 21.
- 22. GRID AUTO ROWS &COLUMNS Set row or column sizes for those not explicitly set.
- 23. GRID AUTO ROWS &COLUMNS Set row or column sizes for those not explicitly set.
- 24. HOW TO FALLBACK CSS Gridis well supported by most recent browsers. Of course we still have to support the likes of IE 11. Rather than polyfill the best bet is to degrade gracefully. Example: https://preview.themes.pizza/zuul/blog/
- 25.
- 26. CSS GRID RESOURCES CSSGrid.io -Wes Bos A Complete Guide to Grid - CSS Tricks Get Ready for CSS Grid Layout - A Book Apart 11 Things I Learned Reading The CSS Grid Specification - Ohans Emmanuel How to recreate Medium’s article layout with CSS Grid - Per Harald Borgen CSS Grid Spec - W3C Firefox Developer Edition
- 27. CSS GRID QUESTIONS Twitter: @jason_yingling Email:jason@jasonyingling.me