Slide 1
Slide 1 text
The CSS Summit, July 2013
Rachel Andrew
@rachelandrew
CSS3 Grids &
Regions
Slide 2
Slide 2 text
We need designed for purpose layout tools!
Floats, positioning, display: table,
display: inline-block
CSS for Layout
Slide 3
Slide 3 text
W3C Working Draft, 2nd April 2013
http://www.w3.org/TR/css3-grid-layout/
CSS
Grid Layout
Slide 4
Slide 4 text
http://www.flickr.com/photos/adactio/1799953270
Slide 5
Slide 5 text
7th April 2011
First public draft
History of CSS
Grid Layout
Slide 6
Slide 6 text
http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/
Slide 7
Slide 7 text
2 April 2013
Current Working Draft
CSS Grid Layout
Slide 8
Slide 8 text
http://www.w3.org/TR/css3-grid-layout/
Slide 9
Slide 9 text
Define a grid using
the new grid and
inline-grid values of
the display property.
.wrapper {
display: grid;
}
Grid Layout
Slide 10
Slide 10 text
The grid-definition-
columns property
defines the grid
columns; grid-
definition-rows the
grid rows.
.wrapper {
display: grid;
grid-definition-columns: 200px 20px auto 20px 200px;
grid-definition-rows: auto 1fr;
}
Grid Layout
Slide 11
Slide 11 text
I have declared a
grid on the wrapper
so the children need
to be positioned.
Grid Layout
Slide 12
Slide 12 text
grid-start and grid-
end set the column
position; grid-before
and grid-after the
row.
.content {
grid-start: 3;
grid-end: 4;
grid-before: 2;
grid-after: 3;
}
Grid Layout
Slide 13
Slide 13 text
Columns used as
gutters still count as
a column, when
positioning items.
.mainnav {
grid-start: 1; grid-end:2;
grid-before: 2; grid-after: 3;
}
.title {
grid-start: 3; grid-end: 4;
grid-before: 1; grid-after: 2;
}
.quote {
grid-start: 5; grid-end:6;
grid-before: 2; grid-after: 3;
}
Grid Layout
Slide 14
Slide 14 text
When we place an
item we declare the
grid lines that
contain it.
.content {
grid-start: 3;
grid-end: 4;
grid-before: 2;
grid-after: 3;
}
Grid Layout
Slide 15
Slide 15 text
When we place an
item we declare the
grid lines that
contain it.
.content {
grid-start: 3;
grid-end: 4;
grid-before: 2;
grid-after: 3;
}
Grid Layout
Slide 16
Slide 16 text
When we place an
item we declare the
grid lines that
contain it.
.content {
grid-start: 3;
grid-end: 4;
grid-before: 2;
grid-after: 3;
}
Grid Layout
Slide 17
Slide 17 text
When we place an
item we declare the
grid lines that
contain it.
.content {
grid-start: 3;
grid-end: 4;
grid-before: 2;
grid-after: 3;
}
Grid Layout
Slide 18
Slide 18 text
When we place an
item we declare the
grid lines that
contain it.
.content {
grid-start: 3;
grid-end: 4;
grid-before: 2;
grid-after: 3;
}
Grid Layout
Slide 19
Slide 19 text
We can also declare
named grid lines.
.wrapper {
display: grid;
grid-definition-columns: “nav” 200px
“gutter” 20px
“main” auto
“gutter” 20px
“sidebar” 200px;
grid-definition-rows: “header” auto “content” 1fr
“content-end”;
}
Grid Layout
Slide 20
Slide 20 text
You then use the
name rather than the
number to place the
content.
.content {
grid-start: "main';
grid-end: span 1;
grid-before: "content";
grid-after: span 1;
}
Grid Layout
Slide 21
Slide 21 text
It will also be
possible to declare a
Grid template.
.wrapper {
display: grid;
grid-definition-columns: 200px 20px auto 20px 200px;
grid-definition-rows: auto 1fr;
grid-template: "header header header header header"
"nav . content . sidebar"
}
Grid Layout
Slide 22
Slide 22 text
With a template
defined you can
more simply target
areas of the
template.
.content {
grid-area: content;
}
Grid Layout
Slide 23
Slide 23 text
New proposals
CSS Grid Layout
Slide 24
Slide 24 text
http://lists.w3.org/Archives/Public/www-style/2013May/0077.html
Slide 25
Slide 25 text
Based on the earlier Draft
IE10 Implementation
CSS Grid Layout
Slide 26
Slide 26 text
Defining a grid in the
IE10
implementation.
.wrapper {
display: -ms-grid;
-ms-grid-columns: 200px 20px auto 20px 200px;
-ms-grid-rows: auto 1fr;
}
Grid Layout
Slide 27
Slide 27 text
The grid-column and
grid-row properties
are used differently
in the new Working
Draft. This is how to
position grid items in
IE10.
.mainnav {
-ms-grid-column: 1;
-ms-grid-row: 2;
}
.title {
-ms-grid-row: 1;
-ms-grid-column:3;
}
.content {
-ms-grid-column: 3;
-ms-grid-row: 2;
}
.quote {
-ms-grid-column: 5;
-ms-grid-row: 2;
}
Grid Layout
Slide 28
Slide 28 text
The IE10
implementation
specifies the row and
column, rather than
the lines around.
.content {
grid-start: 3;
grid-end: 4;
grid-before: 2;
grid-after: 3;
}
Grid Layout
Slide 29
Slide 29 text
The IE10
implementation
specifies the row and
column, rather than
the lines around.
Grid Layout .content {
-ms-grid-column: 3;
-ms-grid-row: 2;
}
Slide 30
Slide 30 text
http://codepen.io/rachelandrew/pen/sFhmx
Slide 31
Slide 31 text
http://caniuse.com/#feat=css-grid
Slide 32
Slide 32 text
Giving Content Priority with CSS Grid Layout - http://24ways.org/2012/
css3-grid-layout/
My Grid examples on CodePen - http://codepen.io/rachelandrew/tag/
24%20ways
CSS Grid Layout - what has changed? - http://www.rachelandrew.co.uk/
archives/2013/04/10/css-grid-layout---what-has-changed/
Named Lines and Grid areas - http://www.rachelandrew.co.uk/archives/
2013/04/29/css-grid-layout-named-grid-lines-and-areas/
My Grid Resources
Slide 33
Slide 33 text
Test Drive Grid (IE10 implementation) - http://ie.microsoft.com/
testdrive/graphics/hands-on-css3/hands-on_grid.htm
Using CSS Grid Layout to build a game - http://www.sitepoint.com/
using-css-grid-layout-and-blend-5-to-build-a-game/
CSS Grid Layout Overhaul, comments needed! - http://www.css3.info/
css-grid-layout-overhaul-comments-needed/
IE10 implementation Polyfill - https://github.com/codler/Grid-Layout-
Polyfill
More resources
Slide 34
Slide 34 text
W3C Working Draft, 28th May 2013
http://www.w3.org/TR/css3-regions/
CSS Regions
Slide 35
Slide 35 text
http://html.adobe.com/webplatform/layout/regions/
Slide 36
Slide 36 text
http://blogs.adobe.com/cantrell/archives/2012/07/all-about-chrome-flags.html
Slide 37
Slide 37 text
My content is inside
the article element.
Regions
...
Slide 38
Slide 38 text
The CSS property
flow-into has a value
of the name you
choose for this
content.
.main {
flow-into: article-thread;
}
Regions
Slide 39
Slide 39 text
The property flow-
from sets where this
content thread
should flow from.
.article-regions {
flow-from: article-thread;
}
Regions
Slide 40
Slide 40 text
Once the content
reaches a height of
6em it will have to
flow into the next
region.
.region1 {
height: 6em;
margin: 0 0 1em 0;
}
Regions
Slide 41
Slide 41 text
The positioning of
the regions can use
any CSS layout
method you like.
.regionwrapper {
display: flex; flex-direction: row;
}
.region2 {
flex: 1; padding: 0.8em; height: 10em; border-right: 1px
dotted #ccc;
}
.region3 {
flex: 1; padding: 0.8em; height: 10em; border-right: 1px
dotted #ccc; background-color: rgb(255,255,255);
}
.region4 {
flex: 1; padding: 0.8em; height: 10em;
}
Regions
Slide 42
Slide 42 text
A height of auto on a
region means it will
expand to take
whatever content is
there. A fixed height
means once that
height is reached the
content moves onto
the next region.
.region5 {
padding: 1em 0 0 0;
margin: 1em 0 0 0;
border-top: 1px dotted #ccc;
height: auto;
}
Regions
Slide 43
Slide 43 text
Regions do not have
to be adjacent.
Regions
Slide 44
Slide 44 text
http://adobe.github.io/web-platform/utilities/css-regions-support-matrix/
Slide 45
Slide 45 text
I have created a
separate HTML
document to store
my content.
Regions content
...
Regions
Slide 46
Slide 46 text
On the page that will
display the content, I
have an iframe with
an ID, and also the
empty regions into
which content will
flow.
iframe>
Regions
Slide 47
Slide 47 text
The flow-into
property on the
iframe ID causes the
iframe to disappear.
#regions-content {
-ms-flow-into: article-thread;
}
Regions
Slide 48
Slide 48 text
We then flow-into
the regions as
before.
.article-regions {
-ms-flow-from: article-thread;
}
Regions
Slide 49
Slide 49 text
Regions can be
positioned using any
method - here I am
using the IE10 Grid
Layout
implementation.
.regionwrapper {
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr;
-ms-grid-rows: 10em 10em auto;
}
.region1 {
margin: 0 0 1em 0;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 3;
}
Regions
Slide 50
Slide 50 text
Edit the grid
definition to change
height of rows to
adjust content flow.
.regionwrapper {
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr;
-ms-grid-rows: 10em 6em auto;
}
Regions
Slide 51
Slide 51 text
Using CSS Regions to flow content through a layout - http://
docs.webplatform.org/wiki/css/tutorials/css-regions
Say hello to CSS Regions Polyfill - http://corlan.org/2013/02/08/say-
hello-to-css-regions-polyfill/
CSS Regions examples on CodePen from Adobe - http://codepen.io/
collection/jabto
An Introduction to CSS Regions - http://dev.opera.com/articles/view/an-
introduction-to-css-regions/
WebPlatform.org CSS Regions - http://docs.webplatform.org/wiki/
tutorials/css-regions
Regions Resources
Slide 52
Slide 52 text
W3C Working Draft, 28th May 2013
http://www.w3.org/TR/css3-exclusions/
CSS Exclusions
Slide 53
Slide 53 text
Defines the wrap-flow and wrap-through properties.
Allow you to wrap text around elements
that are not floated.
Exclusions
Slide 54
Slide 54 text
...
Exclusions
Slide 55
Slide 55 text
Positioning the
exclusion can be
done with any
positioning method.
.exclusion {
height: 160px;
width: 200px;
padding: 10px;
position: absolute;
top: 120px;
left: 120px;
}
Exclusions
Slide 56
Slide 56 text
The wrap-flow
property makes the
text flow round the
exclusion.
.exclusion {
height: 160px;
width: 200px;
padding: 10px;
position: absolute;
top: 120px;
left: 120px;
wrap-flow:both;
}
Exclusions
Slide 57
Slide 57 text
http://adobe.github.io/web-platform/utilities/css-exclusions-support-matrix/
Slide 58
Slide 58 text
Wrap-flow and CSS Exclusions - http://advent2012.digitpaint.nl/21/
Adobe post on separation of the Shapes and Exclusions specs - http://
blogs.adobe.com/webplatform/2013/06/04/how-to-make-a-chocolate-
peanut-butter-cup/
-ms-wrap-flow information on using wrap-flow in IE10 - http://
msdn.microsoft.com/en-us/library/windows/apps/hh767314.aspx
Exclusions Resources
Slide 59
Slide 59 text
W3C Working Draft, 20th June 2013
http://www.w3.org/TR/css-shapes/
CSS Shapes
Slide 60
Slide 60 text
Current draft defines shape-outside, and allows shapes only on floats.
Wrap content around and inside things
that are not rectangles.
CSS Shapes
Slide 61
Slide 61 text
http://adobe.github.io/web-platform/samples/css-exclusions/nevermore/index.html
Slide 62
Slide 62 text
http://codepen.io/adobe/pen/KJisf
Slide 63
Slide 63 text
http://betravis.github.io/shape-tools/polygon-drawing/
Slide 64
Slide 64 text
http://betravis.github.io/shape-tools/polygon-drawing/
Slide 65
Slide 65 text
Experimenting with CSS Exclusions (actually covers Shapes) - http://
blog.digitalbackcountry.com/2012/03/experimenting-with-css-exclusions/
Shapes examples on CodePen from Adobe - http://codepen.io/
collection/qFesk
CSS Shape Tools - http://betravis.github.io/shape-tools
Shapes Resources
Slide 66
Slide 66 text
While specs are at an early stage your
opinion can change things.
Get involved with
new specs!
http://lists.w3.org/Archives/Public/www-style/
Slide 67
Slide 67 text
http://rachelandrew.co.uk/presentations/new-css-layout
@rachelandrew
rachelandrew.co.uk
edgeofmyseat.com
grabaperch.com
Thank you!