css grid layout - razvan rosu
TRANSCRIPT
CSS Grid Layout
What is CSS grid:
- a CSS module- introduces two-dimensional layout system
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) */
}
Example
http://codepen.io/razvan-rosu/pen/zBBRXq?editors=1100
Grid vs Flex
<3Flex 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.
Browser support (9/06/2016):
PS: IE 10/11 uses an older syntax
really… ?
How to try it outGo to Chrome’s flags:
Look for Experimental Web Platform features and enable them
The End