An overview and quick demo of the experimental CSS module: display grid layout

1. CSS Grid Layout

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) */
}

4. Example
http://codepen.io/razvan-rosu/pen/zBBRXq?editors=1100

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