CSS Grid Layout - Razvan Rosu
0 likes290 views
CSS Grid Layout is a two-dimensional grid system for CSS that introduces rows and columns to create page layouts. It allows elements to be positioned precisely on the page using line-based placement similar to table cells. Grid items can span multiple rows and columns and their placement can be controlled through grid-line based placement and span properties. While Flexbox is better suited for simpler one-dimensional layouts, Grid and Flexbox can work together with Flexbox applied to Grid items.
CSS Grid Layout - Razvan Rosu
- 2. What is CSS grid: - a CSS module - introduces two-dimensional layout system
- 3. Basic definition: .grid { display: grid; /* enables the grid layout */ grid-template-columns: 100px auto 100px; /* 3 columns */ grid-template-rows: 25% 50px auto; /* 3 rows */ } .grid-item { grid-column: 2 / span 2; /* starts on the 2nd column, spans on 2 cols */ grid-row: 3; /* starts on the 3rd row, occupies 1 row (default value) */ }
- 5. Grid vs Flex
- 6. <3 Flex was intended for simpler one dimensional layouts. Grid isn’t replacing Flex, they work well together. Flex can be applied on the Grid’s children.
- 7. Browser support (9/06/2016): PS: IE 10/11 uses an older syntax
- 8. really… ?
- 9. How to try it out Go to Chrome’s flags: Look for Experimental Web Platform features and enable them
- 10. The End