Introducing CSS Grid
Download as PPTX, PDF4 likes3,535 views
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.
![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/85/Introducing-CSS-Grid-11-320.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/85/Introducing-CSS-Grid-15-320.jpg)
Introducing CSS Grid
- 1. INTRODUCING CSS GRIDJason Yingling (@jason_yingling)
- 2. WHAT IS CSS GRID CSS Grid is a 2 dimensional layout system that can handle both columns and rows.
- 3. CAN I USE CSS GRID 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 container is the parent of all grid items. It is declared with the display: grid; rule.
- 5. GRID ITEM The items that are direct children of the grid container. These are the elements that will be placed on the grid.
- 6. GRID LINES The lines that divide the columns and rows of the grid. These are numbered starting with 1.
- 7. GRID TRACK The space between 2 adjacent grid lines. Essentially your columns and rows.
- 8. GRID CELL The space between 2 adjacent grid column lines and 2 adjacent grid row lines.
- 9. GRID AREA The space between any 4 grid lines. It can cover any number of rows and columns.
- 10. GRID TEMPLATE COLUMNS Defines the width of the columns in the grid. grid-template-columns: 100px auto 200px;
- 11. GRID TEMPLATE ROWS Defines the height of the grid rows. grid-template-rows: [row1-start] 224px [row2-start] 224px [end];
- 12. GRID COLUMN GAP Define the size of the grid lines between columns. grid-column-gap: 30px;
- 13. GRID ROW GAP Defines the size of the grid lines between rows. grid-row-gap: 40px;
- 14. GRID GAP Shorthand for row and 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 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";
- 16. FRACTIONAL (FR) UNITS Grid comes with 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 to easily repeat settings. grid-template-columns: repeat(12, 1fr);
- 18. GRID COLUMN START Grid Column Start / Grid Column End | Grid Column grid-column-start: 2; grid-column-end: 4; Shorthand grid-column: 2 / 4;
- 19. GRID ROW START Grid Row Start / Grid Row End | Grid Row grid-row-start: 1; grid-row-end: 2; Shorthand grid-row: 1 / 2;
- 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 Grid is 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. LEARNING MORE CSSGrid.io by Wes Bos
- 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