CSS3 Grid Layout
The positioning module "Grid Layout" is a W3C specification in draft form (Working Draft) whose first drafts are for 2004.
Its official documentation is maintained by actuelllement four contributors, including three people from Microsoft, and Daniel Glazman , co-chairman of the W3C CSS.
The compatibility of this module is somewhat tenuous at present: as evidenced by the excellent resource Can I Use , only ... Internet Explorer 10 (currently in beta) now supports this specification . But other tenors (Mozilla, Webkit, Opera) are also interested and should not delay in implementing this module, given the vast potential of this positioning scheme. This will include on Chrome 19.
Compatibilité browsers module Grid Layout
The positioning grid
The general concept of Grid Layout (or "grid position") is virtually dividing the space into major areas in a page or application. Concretely and schematically, it will cut into rows and columns as we would with a table layout.
There are also numerous references to display "tabular" with rows and columns, rowspan and colspan. In this, the positioning scheme is very similar to HTML tables or type renderings display: table , display: table-cell and other display: table-row .
But the most obvious difference is that the grid is a mental construct and requires no HTML or markup element to be developed. No physical structure as <table> , <tbody> , <tr> , <td> or <th> is required, which facilitates adaptation to different screen sizes and devices: no need to intervene on the order of nature or the "semantic" HTML elements, just change the initial framework for adapt to it accordingly.
The usual properties of Grid Layout
Implementation
We create a "grid context" simply by applying the declaration display: grid in a container element that constitute the general framework. This frame will be defined by a virtual pattern formed of rows and columns defining "cells".
All children (direct) this General container, provided they are originally type "block" will automatically be affected by this particular context and can be placed in "cells" (grid-cell) of the frame.
Example 1 (displaying two blocks on one line):
Variation: syntax templates
Grid Layout allows the visualization in the form of canvas, explicitly naming the location of the grid with letters of the alphabet.
This variant is currently recognized by any browser, so the tests remain difficult to achieve, but here's the general concept:
Example 3 (template):
The width and height units
The model grid view not only to use units of width and height typical, he introduced complex functions to adapt to different contexts of content:
Example 4 (illustration of the unit "en" ):
Center items
Grid Layout aligns the content vertically or horizontally using the properties grid-row-align and grid-align-column whose values can be:
Example 5 (multiple spigots):
.Occupy multiple locations
Attributes such as the famous rowspan and colspan dedicated to HTML tables, Grid Layout module introduces the possibility for an item span multiple locations, both horizontally and vertically.
The CSS grid-row-span and grid-column-span are responsible for organizing the distribution of multiple rows or columns.
Example 6 (column span):
.The pseudo-element :: grid-cell
The pseudo-element :: grid-cell has the power to appoint a grid location in a very intuitive in order to place an item.
This pseudo-element is not yet supported by any browser.
Example 7 (named cells):
A powerful feature of positioning as a grid is to apply repeat units of columns or rows (called "patterns").
For example, if I want to repeat the pattern of columns (1em 50px) ten times in the grid, I will write grid-columns: (1em 50px) [10]
Example 9 (patterns):
.You said "responsive"?
To end this presentation of the model positioning Grid Layout in triumph, I saved the best for last.
One of the most obvious advantages of a virtual grid, independent of the HTML elements that can move to that position, it is extremely simple to change the grid depending on the context. For example, to immediately adapt to different screen sizes, just ... change the initial grid.
Associated with CSS3 media queries, the positioning model grid gives all its power, especially if you have opted for a frame variant form of "template". Indeed, only the boss of departure needs to be changed: no need to intervene on the HTML structure, nor on the positioning of each page element.
Example 10 (adapted for small screens):
.Conclusion and use
Given the compatibility of browsers almost nonexistent Grid Layout module, it is of course unrealistic to use this type of positioning in production right now, even on cutting-edge devices. However, the simplicity and robustness of this scheme promises a bright future: Microsoft has opened the door (but it will be upgrading to Windows 8), and other browsers will undoubtedly follow suit quickly.
Appointment in a few years? :)
To go further on this subject, I refer you to a presentation (PDF) that I presented February 8, 2012 at the MS TechDays conference series on the Grid Layout module and two other advanced CSS3.
Resources
http://www.w3.org/TR/css3-grid-layout/
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm
http://www.slideshare.net/goetter/tech-days2012-goetter
The positioning module "Grid Layout" is a W3C specification in draft form (Working Draft) whose first drafts are for 2004.
Its official documentation is maintained by actuelllement four contributors, including three people from Microsoft, and Daniel Glazman , co-chairman of the W3C CSS.
The compatibility of this module is somewhat tenuous at present: as evidenced by the excellent resource Can I Use , only ... Internet Explorer 10 (currently in beta) now supports this specification . But other tenors (Mozilla, Webkit, Opera) are also interested and should not delay in implementing this module, given the vast potential of this positioning scheme. This will include on Chrome 19.
Compatibilité browsers module Grid Layout
Navigateurs | Versions |
|---|---|
 | Internet Explorer 10+ |
The positioning grid
The general concept of Grid Layout (or "grid position") is virtually dividing the space into major areas in a page or application. Concretely and schematically, it will cut into rows and columns as we would with a table layout.
There are also numerous references to display "tabular" with rows and columns, rowspan and colspan. In this, the positioning scheme is very similar to HTML tables or type renderings display: table , display: table-cell and other display: table-row .
But the most obvious difference is that the grid is a mental construct and requires no HTML or markup element to be developed. No physical structure as <table> , <tbody> , <tr> , <td> or <th> is required, which facilitates adaptation to different screen sizes and devices: no need to intervene on the order of nature or the "semantic" HTML elements, just change the initial framework for adapt to it accordingly.
The usual properties of Grid Layout
Property | Details |
|---|---|
grid , inline-grid | declaration of a Grid environment |
grid-template | declaration of a "canvas" of named cells (optional) |
grid-rows , grid-columns | statement of the dimensions of rows and columns |
-row grid , grid-column | placing an element in a row or column |
grid-cell | positioning an element in a cell named |
grid-row-span , grid-column-span | distribution of multiple rows or columns |
grid-align-row , column-grid-align | horizontal or vertical alignment |
grid-layer | level plan for overlapping elements |
We create a "grid context" simply by applying the declaration display: grid in a container element that constitute the general framework. This frame will be defined by a virtual pattern formed of rows and columns defining "cells".
All children (direct) this General container, provided they are originally type "block" will automatically be affected by this particular context and can be placed in "cells" (grid-cell) of the frame.
Example 1 (displaying two blocks on one line):
< body >
< nav > nav
< section > section
</ body >
=========================================
< nav > nav
< section > section
</ body >
=========================================
body {
display : grid ,
grid-columns : 250 px 300 px ;
}
nav {
grid-column : 1 , / * placement in column 1 * /
}
section {
grid-column : 2 ; / * placement in column 2 * /
}
display : grid ,
grid-columns : 250 px 300 px ;
}
nav {
grid-column : 1 , / * placement in column 1 * /
}
section {
grid-column : 2 ; / * placement in column 2 * /
}
Compatibility Note: the module "Grid Layout", still in draft (Working Draft), currently only works on IE10 and requires sellers-ms-prefix to be applied (eg: display:-ms-grid , or -ms- grid-row 2 ). On this page, we mention only the syntax finalized without prefix, but you should add them to your tests.
Example 2 (grid 4 locations):< body >
< nav > nav
< section > section
< item > item
< aside > aside
</ body >
.< nav > nav
< section > section
< item > item
< aside > aside
</ body >
body {
display: grid;
grid-columns: 250px 400px;
grid-rows: 100px 300px;
}
nav {
grid-column: 1; grid-row: 1;
}
section {
grid-column: 2; grid-row: 1;
}
article {
grid-column: 1; grid-row: 2;
}
aside {
grid-column: 2; grid-row: 2;
}
display: grid;
grid-columns: 250px 400px;
grid-rows: 100px 300px;
}
nav {
grid-column: 1; grid-row: 1;
}
section {
grid-column: 2; grid-row: 1;
}
article {
grid-column: 1; grid-row: 2;
}
aside {
grid-column: 2; grid-row: 2;
}
Variation: syntax templates
Grid Layout allows the visualization in the form of canvas, explicitly naming the location of the grid with letters of the alphabet.
This variant is currently recognized by any browser, so the tests remain difficult to achieve, but here's the general concept:
Example 3 (template):
# Ingrid {
display : grid ,
grid-template : "hh" "nc" "ff" ;
}
ingrid # nav {
grid-cell : "n" , / *
display : grid ,
grid-template : "hh" "nc" "ff" ;
}
ingrid # nav {
grid-cell : "n" , / *
The width and height units
The model grid view not only to use units of width and height typical, he introduced complex functions to adapt to different contexts of content:
Unit | Details |
|---|---|
px , % , em , ex , rem ... | pixels, percentages, em, ... (current units) |
en | fraction (s) of the remaining space |
min-content | refers to the width (or height) of the smallest element |
max-content | refers to the width (or height) of the largest |
minmax(min, max) | example minmax (min-content, 20%) corresponds to 20% width (or height), but the minimum width (or height) of content |
auto | adapts to the width (or height) of the content |
made-content | identical to self and also minmax (min-content, max-content) |
html , body { height : 100 % ; }
body {
display : grid ,
grid-columns : 250 px 1 fr ; / * width and 250px "remaining space"
body {
display : grid ,
grid-columns : 250 px 1 fr ; / * width and 250px "remaining space"
Grid Layout aligns the content vertically or horizontally using the properties grid-row-align and grid-align-column whose values can be:
| As | Details |
| home | aligns the element at the beginning of the cell (left or right depending on the direction of reading) |
| end | aligns the element at the end of the cell (left or right depending on the direction of reading) |
| center | element to place the center of the cell |
| Stretch | stretches the element (margins) to occupy all the space in the cell |
html, body {height: 100%;}
body {
display: grid;
grid-columns: 250px 250px;
grid-rows: 250px 250px;
}
nav {
grid-column: 1; grid-row: 1;
}
section {
grid-column: 2; grid-row: 1;
grid-row-align : center;
}
article {
grid-column: 1; grid-row: 2;
grid-column-align : center;
}
aside {
grid-column: 2; grid-row: 2;
grid-row-align : center;
grid-column-align : center;
}
body {
display: grid;
grid-columns: 250px 250px;
grid-rows: 250px 250px;
}
nav {
grid-column: 1; grid-row: 1;
}
section {
grid-column: 2; grid-row: 1;
grid-row-align : center;
}
article {
grid-column: 1; grid-row: 2;
grid-column-align : center;
}
aside {
grid-column: 2; grid-row: 2;
grid-row-align : center;
grid-column-align : center;
}
Attributes such as the famous rowspan and colspan dedicated to HTML tables, Grid Layout module introduces the possibility for an item span multiple locations, both horizontally and vertically.
The CSS grid-row-span and grid-column-span are responsible for organizing the distribution of multiple rows or columns.
Example 6 (column span):
header {
grid-column: 1; grid-row: 1;
grid-column-span: 2;
}
nav {
grid-column: 1; grid-row: 2;
}
section {
grid-column: 2; grid-row: 2;
}
grid-column: 1; grid-row: 1;
grid-column-span: 2;
}
nav {
grid-column: 1; grid-row: 2;
}
section {
grid-column: 2; grid-row: 2;
}
The pseudo-element :: grid-cell has the power to appoint a grid location in a very intuitive in order to place an item.
This pseudo-element is not yet supported by any browser.
Example 7 (named cells):
body {
display : grid ,
grid-columns : 300 px 300 px ;
grid-rows : 200 px 300 px ;
}
body :: grid-cell ("nav") { / * position "nav" will in the first column, 2nd line * /
grid-column : 1 , grid-row : 2 ;
}
body nav {
grid-cell : "nav" , / * we position ourselves in "nav" * /
}
The repeating unitsdisplay : grid ,
grid-columns : 300 px 300 px ;
grid-rows : 200 px 300 px ;
}
body :: grid-cell ("nav") { / * position "nav" will in the first column, 2nd line * /
grid-column : 1 , grid-row : 2 ;
}
body nav {
grid-cell : "nav" , / * we position ourselves in "nav" * /
}
A powerful feature of positioning as a grid is to apply repeat units of columns or rows (called "patterns").
For example, if I want to repeat the pattern of columns (1em 50px) ten times in the grid, I will write grid-columns: (1em 50px) [10]
Example 9 (patterns):
body { grid-columns : 10 px ( 1 en 10 px) [ 4 ] ; }
/ * matches 10px 10px 1en 1en 10px 10px 1en 1en 10px * /
/ * matches 10px 10px 1en 1en 10px 10px 1en 1en 10px * /
To end this presentation of the model positioning Grid Layout in triumph, I saved the best for last.
One of the most obvious advantages of a virtual grid, independent of the HTML elements that can move to that position, it is extremely simple to change the grid depending on the context. For example, to immediately adapt to different screen sizes, just ... change the initial grid.
Associated with CSS3 media queries, the positioning model grid gives all its power, especially if you have opted for a frame variant form of "template". Indeed, only the boss of departure needs to be changed: no need to intervene on the HTML structure, nor on the positioning of each page element.
Example 10 (adapted for small screens):
body {
display : grid ,
grid-template : "abcd" ;
}
@ media (max-width: 640 px) {
body {
display : grid ,
grid-template : "a" "b" "c" "d" ;
}
}
display : grid ,
grid-template : "abcd" ;
}
@ media (max-width: 640 px) {
body {
display : grid ,
grid-template : "a" "b" "c" "d" ;
}
}
Given the compatibility of browsers almost nonexistent Grid Layout module, it is of course unrealistic to use this type of positioning in production right now, even on cutting-edge devices. However, the simplicity and robustness of this scheme promises a bright future: Microsoft has opened the door (but it will be upgrading to Windows 8), and other browsers will undoubtedly follow suit quickly.
Appointment in a few years? :)
To go further on this subject, I refer you to a presentation (PDF) that I presented February 8, 2012 at the MS TechDays conference series on the Grid Layout module and two other advanced CSS3.
Resources
http://www.w3.org/TR/css3-grid-layout/
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm
http://www.slideshare.net/goetter/tech-days2012-goetter
No comments:
Post a Comment