The New CSS Layout - Dutch PHP Conference
-
Upload
rachel-andrew -
Category
Technology
-
view
526 -
download
0
Transcript of The New CSS Layout - Dutch PHP Conference
![Page 1: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/1.jpg)
The New CSS LayoutRachel Andrew
Dutch PHP Conference, 2015
![Page 2: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/2.jpg)
Rachel Andrew
http://rachelandrew.co.uk
@rachelandrew
http://grabaperch.com
![Page 3: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/3.jpg)
The trouble with CSS layout
• Floats and clearfix hacks
• Absolute positioning means elements are taken out of document flow and risk overlaps
• Redundant markup and positioning oddities with display: table
• White space issues with inline-block
![Page 4: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/4.jpg)
The cost of taming layout methods
• Developer hours spent learning non-obvious concepts.
• Compromises in terms of document semantics in order to achieve responsive layouts.
• Needing to lean on frameworks to help with complex math.
• Adding markup to create grids
• Using preprocessors to abstract layout hacks
![Page 5: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/5.jpg)
Multi-column Layout
http://www.w3.org/TR/css3-multicol/
http://dev.w3.org/csswg/css-multicol-1/
http://www.flickr.com/photos/62693815@N03/6277209256/
![Page 7: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/7.jpg)
In my HTML I have an article with a class of ‘main’.
<article class="main"> <h1>Blanchard Crosses the Sea in a Balloon</h1> <p> ... </p> </article>
![Page 8: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/8.jpg)
![Page 9: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/9.jpg)
Use the property column-width to declare a width for our columns.
The browser will create as many columns as possible using that as the ideal width. .main {
column-width: 220px; }
![Page 10: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/10.jpg)
![Page 11: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/11.jpg)
CSS Multiple column layout
[The column-width value] describes the optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). Specified values must be greater than 0.
![Page 12: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/12.jpg)
Set the property column-count to 3 and the browser will always create three columns.
.main { column-count: 3; }
![Page 13: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/13.jpg)
The gap between columns is controlled by the column-gap property.
Give this a value of 0 and you have no gap.
.main { column-count: 3; column-gap: 0; }
![Page 14: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/14.jpg)
![Page 15: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/15.jpg)
The browser takes the column-gap into account when calculating the size of the columns.
.main { column-count: 3; column-gap: 20px; }
![Page 16: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/16.jpg)
Styling columns
• very limited in the current specification
• cannot set size of an individual column
• cannot change background colour of a column
• cannot set padding or margins on a column
![Page 17: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/17.jpg)
Multiple column layout
future specifications may add additional functionality. For example, columns of different widths and different backgrounds may be supported.
![Page 18: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/18.jpg)
Add a rule between columns using the column-rule property.
This is a shorthand for:
column-rule-width column-rule-style column-rule-color
These properties behave just like the border properties.
.main { column-count: 3; column-gap: 20px; column-rule: 2px dotted #ccc; }
![Page 19: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/19.jpg)
![Page 20: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/20.jpg)
![Page 21: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/21.jpg)
The property column-span can have a value of all or none. If set to all the element will span all columns.
.main h1,
.image { column-span: all; }
![Page 22: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/22.jpg)
![Page 23: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/23.jpg)
Use multiple column layout to tidy up the display of small UI elements.
![Page 24: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/24.jpg)
![Page 25: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/25.jpg)
Resources
Dev.Opera: https://dev.opera.com/articles/css3-multi-column-layout/
MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts
CSS Tricks: https://css-tricks.com/guide-responsive-friendly-css-columns/
Multi-column generator: http://aaronlumsden.com/multicol/
![Page 26: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/26.jpg)
Flexible Box Layout
http://www.w3.org/TR/css-flexbox-1/
http://dev.w3.org/csswg/css-flexbox/
https://www.flickr.com/photos/zervas/2810241612
![Page 28: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/28.jpg)
Navigation marked up as an unordered list in my HTML.
<nav> <ul class="nav"> <li><a href="">Introduction</a></li> <li><a href="">Ancient Times</a></li> <li><a href="">Balloon Theory</a></li> <li><a href="">First Public Trial</a></li> <li><a href="">Experiments</a></li> </ul> </nav>
![Page 29: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/29.jpg)
![Page 30: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/30.jpg)
flex is a new value of the display property. This causes the element to use flexbox.
justify-content lets us set how the content is justified. nav ul{
display: flex; justify-content: space-between; }
![Page 31: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/31.jpg)
![Page 32: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/32.jpg)
To have equal space all around the item give justify-content a value of space-around.
nav ul{ display: flex; justify-content: space-around; }
![Page 33: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/33.jpg)
![Page 34: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/34.jpg)
Default flexbox behaviour
• Items displayed as a row
• Items displayed in natural (DOM) order
• align-items set to stretch
• flex-wrap set to nowrap
![Page 35: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/35.jpg)
The flex-direction property.
- row - row-reverse - column - column-reverse nav ul{
display: flex; justify-content: space-around; flex-direction: row; }
![Page 36: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/36.jpg)
The flex-direction property.
- row - row-reverse - column - column-reverse nav ul{
display: flex; justify-content: space-around; flex-direction: row-reverse; }
![Page 37: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/37.jpg)
![Page 38: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/38.jpg)
The flex-direction property.
- row - row-reverse - column - column-reverse nav ul{
display: flex; justify-content: space-around; flex-direction: column; }
![Page 39: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/39.jpg)
![Page 40: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/40.jpg)
The align-items property:
- flex-start - flex-end - center - baseline - stretch nav ul{
display: flex; justify-content: space-between; align-items: flex-end; }
![Page 41: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/41.jpg)
![Page 42: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/42.jpg)
![Page 43: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/43.jpg)
![Page 44: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/44.jpg)
Our boxes are displayed using flexbox. If there is not space for all 3 they will wrap as the flex-wrap property is set to wrap.
.boxes { display: flex; flex-wrap: wrap; justify-content: space-around; } .box { border: 1px solid #444; padding: 10px; margin: 10px; flex-grow: 1; flex-shrink: 1; flex-basis: 200px; min-width: 1px; }
![Page 45: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/45.jpg)
The flex property is a shorthand for the three properties. Initial values as follows:
flex-grow: 0; flex-shrink: 1; flex-basis: auto;
.boxes { display: flex; flex-wrap: wrap; justify-content: space-around; } .box { border: 1px solid #444; padding: 10px; margin: 10px; flex: 1 1 200px;
min-width: 1px; }
![Page 46: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/46.jpg)
Giving the box with a class of .box2 a flex-grow value of 2. The other boxes have flex-grow set to 1.
.box2 { flex-grow: 2; }
![Page 47: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/47.jpg)
![Page 48: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/48.jpg)
Use the order property to change the order of flex items.
.box1 { order: 3; }
.box2 { flex-grow: 2; order: 1; }
.box3 { order: 2; }
![Page 49: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/49.jpg)
![Page 50: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/50.jpg)
ResourcesSolved by Flexbox: http://philipwalton.github.io/solved-by-flexbox/
CSS Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox Cheat Sheet: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
Flexbox in 5: http://flexboxin5.com/
Useful information on supporting older browsers:
http://www.planningforaliens.com/blog/2014/03/11/real-world-flexbox/
http://zomigi.com/downloads/Leveling-Up-With-Flexbox_SmashingConf_140319.pdf
![Page 51: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/51.jpg)
CSS Shapes
http://www.w3.org/TR/css-shapes/http://dev.w3.org/csswg/css-shapes/
http://dev.w3.org/csswg/css-shapes-2/
https://www.flickr.com/photos/randar/8063840431
![Page 54: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/54.jpg)
![Page 55: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/55.jpg)
We have floated our image left.
.shape { float: left; width: 150px; height: 150px; margin: 20px;
}
![Page 56: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/56.jpg)
Add the property shape-outside with a value of circle(50%).
.shape { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50%); }
![Page 57: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/57.jpg)
![Page 59: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/59.jpg)
![Page 60: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/60.jpg)
Basic Shapes
• inset()
• circle()
• ellipse()
• polygon()
![Page 61: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/61.jpg)
Using the polygon value for shape-inside.
The polygon requires at least 3 sets of x, y coordinates.
.shape { float: left; width: 200px; height: 200px; margin-top: 10px; }
.shape-polygon { shape-outside: polygon(0 20px, 160px 40px, 180px 70px, 180px 120px, 120px 200px, 60px 210px, 0 220px); }
![Page 62: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/62.jpg)
![Page 63: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/63.jpg)
Shapes from the Alpha Channel
![Page 65: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/65.jpg)
My HTML contains an image along with some text.
<div class="s-box"> <img src="noun_109069.png" alt="" width="200" class="shape shape-image”> <p> ... </p> </div>
![Page 66: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/66.jpg)
To use an alpha channel pass in a URL for your image and a threshold for the transparency.
.shape-image { shape-outside: url('noun_109069.png'); shape-image-threshold: 0.5; }
![Page 67: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/67.jpg)
![Page 68: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/68.jpg)
Use an image in generated content to shape your text.
.content:before { content: ""; float: left; width: 200px; height: 200px; shape-outside: url('alpha.png'); shape-image-threshold: 0.5; }
![Page 69: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/69.jpg)
![Page 70: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/70.jpg)
What’s next for Shapes?
• shape-inside - text flowing inside a shape
• shapes defined on elements that are not floated
• shape-padding property
• Level 2 specification http://dev.w3.org/csswg/css-shapes-2
![Page 71: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/71.jpg)
Resources
How to Get Started with CSS Shapes: http://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/
A List Apart: http://alistapart.com/article/css-shapes-101
HTML5 Rocks: http://www.html5rocks.com/en/tutorials/shapes/getting-started/
How to prepare images using Photoshop: http://blogs.adobe.com/webplatform/2014/03/11/add-shape-and-depth-to-your-layout-with-photoshop-and-css-shapes/
Adobe: http://webplatform.adobe.com/shapes/
![Page 72: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/72.jpg)
CSS Grid Layout
http://www.w3.org/TR/css-grid-1/
http://dev.w3.org/csswg/css-grid/
http://www.flickr.com/photos/adactio/1799953270
![Page 74: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/74.jpg)
Browser SupportAll my examples work in Chrome unprefixed - you need to enable the Experimental Web Platform Features flag.
You can also use Webkit nightlies, with the -webkit prefix.
The work in Blink and Webkit is being done by Igalia, sponsored by Bloomberg.
IE10 and up has support for the old syntax, with an -ms prefix.
Mozilla are currently implementing Grid in Firefox.
There is a Polyfill under active development: https://github.com/FremyCompany/css-grid-polyfill/
![Page 75: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/75.jpg)
Our HTML consists of a div with a class of wrapper and six child elements.
<div class="wrapper"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> <div class="d">D</div> <div class="e">E</div> <div class="f">F</div> </div>
![Page 76: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/76.jpg)
To create a grid we use a new value of the display property.
display: grid
.wrapper { display: grid;
}
![Page 77: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/77.jpg)
We describe the grid using the new properties:
grid-template-columns
grid-template-rows
.wrapper { display: grid; grid-template-columns: 100px 10px 100px 10px 100px; grid-template-rows: auto 10px auto; }
![Page 78: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/78.jpg)
We position items using the new properties:
grid-column-startgrid-column-endgrid-row-startgrid-row-end
.a { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }
![Page 79: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/79.jpg)
To position an item bottom centre, I start at column line 3, this is the line after the gutter track.
.b { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; }
![Page 80: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/80.jpg)
To span more tracks we just change the end row or column line.
.b { grid-column-start: 3; grid-column-end: 6; grid-row-start: 3; grid-row-end: 4; }
![Page 81: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/81.jpg)
The longhand for line-based placement means up to 4 properties to position each element. .a {
grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }
.b { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; }
![Page 82: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/82.jpg)
Declare start and end values with grid-column and grid-row.
Values are separated by a / symbol.
.a { grid-column: 1 / 2; grid-row: 1 / 2; }
.b { grid-column: 3 / 6; grid-row: 3 / 4; }
![Page 83: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/83.jpg)
Declare all 4 values using the grid-area property.
.a { grid-area: 1 / 1 / 2 / 2; }
.b { grid-area: 3 / 3 / 4 / 6; }
![Page 84: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/84.jpg)
Grid Terminology
![Page 85: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/85.jpg)
Grid Lines
Lines can be horizontal or vertical. They are referred to by number and can be
named.
Highlighted is Column Line 2.
![Page 86: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/86.jpg)
Grid Track
A Grid Track is the space between two Grid Lines. Tracks can be horizontal or
vertical (rows or columns).
The highlighted Grid Track is between Row Lines 2 and 3.
![Page 87: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/87.jpg)
Grid Cell
The smallest unit on our grid, a Grid Cell is the space between four Grid Lines. It’s
just like a table cell.
The highlighted Grid Cell is between row lines 2 and 3 and column lines 2 and 3.
![Page 88: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/88.jpg)
Grid Area
Any area of the Grid bound by 4 Grid Lines. It can contain many Grid Cells.
The highlighted Grid Area is between row lines 1 and 3, column lines 2 and 4.
![Page 89: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/89.jpg)
All examples can be found at http://gridbyexample.com. Use Chrome. Enable “Experimental Web Platform Features” flag.
![Page 90: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/90.jpg)
Line-based placement
![Page 91: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/91.jpg)
![Page 92: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/92.jpg)
The HTML around my page content.
The various areas of my page are child elements of a div with a class of wrapper.
<div class="wrapper">
<header class="mainheader"></header>
<div class="panel"></div>
<div class="content"></div>
</div>
![Page 93: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/93.jpg)
![Page 94: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/94.jpg)
Declaring a grid on wrapper.
The grid has three columns, and four rows.
.wrapper { width: 100%; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 30% 5% 65%; grid-template-rows: 40px auto 20px auto; }
![Page 95: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/95.jpg)
![Page 96: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/96.jpg)
Positioning our elements using the grid-column and grid-row shorthand.
This is all we need to do to create our layout.
.mainheader { grid-column: 1 / 4; grid-row: 2 / 3; }
.panel { grid-column: 1 / 2; grid-row: 4 / 5; }
.content { grid-column: 3 / 4; grid-row: 4 / 5; }
![Page 97: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/97.jpg)
![Page 98: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/98.jpg)
![Page 99: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/99.jpg)
I can add a footer to this layout.
<div class="wrapper">
<header class="mainheader"></header>
<div class="panel"></div>
<div class="content"></div>
<footer class="mainfooter"></footer>
</div>
![Page 100: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/100.jpg)
Positioning the footer between row lines five and six.
.mainfooter { grid-column: 1 / 4; grid-row: 5 / 6; }
![Page 101: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/101.jpg)
![Page 102: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/102.jpg)
Our grid only has 5 row lines specified - yet we placed an item between row lines 5 and 6.
Grid creates an implicit grid line for us.
.wrapper { display: grid; grid-template-columns: 30% 5% 65%; grid-template-rows: 40px auto 20px auto; }
.mainfooter { grid-column: 1 / 4; grid-row: 5 / 6; }
![Page 103: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/103.jpg)
Grid lines can be explicit or implicit
• Explicit grid lines are those specified using grid-template-rows or grid-template-columns.
• Implicit lines are created when you place something into a row or column track outside of the explicit grid.
• Default behaviour is those tracks are auto sized. You can specify a size with the grid-auto-columns and grid-auto-rows properties.
![Page 104: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/104.jpg)
Grid is “table like” however …
• Unlike a table for layout Grid does not rely on your content being a particular order in the source.
• Being entirely described in CSS we can move things around the Grid at different breakpoints, introduce or redefine a Grid for any breakpoint.
![Page 105: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/105.jpg)
Using Grid to order the page elements in a single column for narrow screen widths.
.wrapper { display: grid; grid-template-rows: 10px auto 10px auto 10px auto 10px auto; } .mainheader { grid-row: 2 / 3; }
.content { grid-row: 4 / 5; }
.panel { grid-row: 6 / 7; }
.mainfooter { grid-row: 8 / 9; }
![Page 106: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/106.jpg)
![Page 107: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/107.jpg)
Redefine the Grid at min-width 550 pixels.
Position items as in the earlier example.
@media (min-width: 550px) { .wrapper { grid-template-columns: 30% 5% 65%; grid-template-rows: 40px auto 20px auto 20px auto; } .mainheader { grid-column: 1 / 4; grid-row: 2 / 3; } .panel { grid-column: 1 / 2; grid-row: 4 / 5; } .content { grid-column: 3 / 4; grid-row: 4 / 5; } .mainfooter { grid-column: 1 / 4; grid-row: 6 / 7; } }
![Page 108: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/108.jpg)
Named Areas
![Page 109: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/109.jpg)
![Page 110: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/110.jpg)
We assign a name to the elements on our page.
I am doing this outside of any Media Queries.
.mainheader { grid-area: header; }
.content { grid-area: content; }
.panel { grid-area: sidebar; }
.mainfooter { grid-area: footer; }
![Page 111: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/111.jpg)
Describe the layout on the parent element using the grid-template-areas property.
A period “.” indicates that this grid cell is empty.
.wrapper { display: grid; grid-template-rows: 10px auto 10px auto 10px auto 10px auto; grid-template-areas: "." "header" "." "content" "." "sidebar" "." "footer"; }
![Page 112: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/112.jpg)
![Page 113: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/113.jpg)
![Page 114: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/114.jpg)
Redefining the template areas for the wider layout. @media (min-width: 550px) {
.wrapper { grid-template-columns: 30% 5% 65%; grid-template-rows: 2em auto 1em auto 1em auto; grid-template-areas: ". . ." "header header header" ". . ." "sidebar . content" ". . ." "footer footer footer" } }
![Page 115: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/115.jpg)
![Page 116: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/116.jpg)
![Page 117: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/117.jpg)
Resources
Grid by Example: http://gridbyexample.com
Examples from Igalia: http://igalia.github.io/css-grid-layout/
An article covering the original IE10 implementation: http://24ways.org/2012/css3-grid-layout/
![Page 118: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/118.jpg)
CSS Exclusions
http://www.w3.org/TR/css3-exclusions/
http://dev.w3.org/csswg/css-exclusions/
https://www.flickr.com/photos/markusspiske/15115777092
![Page 120: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/120.jpg)
Floated items always rise to the top. We can wrap text around the right or
left and bottom of an item.
![Page 121: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/121.jpg)
Exclusions enable wrapping text around all sides of an item.
![Page 122: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/122.jpg)
I have an article with an image as the last child in the source.
The image has a class of exclusion. <article>
<p> ... </p>
<img src="balloons3.jpg" alt="Hot air balloons" class="exclusion" />
</article>
![Page 123: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/123.jpg)
The article has been given position relative to create a positioning context.
I have then positioned the image using absolute positioning.
.main { position:relative; }
.exclusion { position: absolute; top: 14em; left: 14em; width: 320px;
}
![Page 124: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/124.jpg)
![Page 125: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/125.jpg)
The wrap-flow property means that the text will respect the positioned element and wrap round both sides.
I’m using the -ms prefix given this is only implemented in IE browsers.
.main { position:relative; }
.exclusion { position: absolute; top: 14em; left: 14em; width: 320px; -ms-wrap-flow: both; }
![Page 126: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/126.jpg)
![Page 127: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/127.jpg)
CSS Regions
http://www.w3.org/TR/css-regions-1/
http://dev.w3.org/csswg/css-regions/
https://www.flickr.com/photos/striatic/3529866/
![Page 130: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/130.jpg)
Regions were in the Blink engine but removed in January 2014. They are still part of Safari desktop and iOS.
https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/kTktlHPJn4Q/YrnfLxeMO7IJ
![Page 131: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/131.jpg)
I have an article contained inside an article element.
Below that is a set of empty elements, each with a class of article-regions.
<article class="main content”> <p> ... </p> </article>
<div class="region1 article-regions"></div> <div class="regionwrapper"> <div class="region2 article-regions"></div> <div class="region3 article-regions"></div> <div class="region4 article-regions"></div> </div> <div class="region5 article-regions"></div>
![Page 132: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/132.jpg)
![Page 133: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/133.jpg)
We flow the content of our article into ‘article-thread’. This is a name we have given the content.
We then flow the content into .article-regions - this is the class we gave our empty elements.
.main { flow-into: article-thread; }
.article-regions { flow-from: article-thread; }
![Page 134: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/134.jpg)
Positioning the empty elements. .region1 {
height: 10em; } .regionwrapper { display: flex; flex-direction: row; } .region2 { flex: 1; padding: 10px; height: 10em; } .region3 { flex: 1; padding: 10px; height: 10em; } .region4 { flex: 1; padding: 10px; height: 10em; } .region5 { padding: 10px; }
![Page 135: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/135.jpg)
![Page 136: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/136.jpg)
Resources
An Introduction to CSS Regions: https://dev.opera.com/articles/introduction-to-css-regions/
Use CSS Regions to flow content through a layout: https://docs.webplatform.org/wiki/tutorials/css-regions
Say Hello to CSS Regions Polyfill: http://corlan.org/2013/02/08/say-hello-to-css-regions-polyfill/
Introducing CSS Regions: http://www.webdesignerdepot.com/2013/09/introducing-css-regions/
![Page 137: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/137.jpg)
Why explore emerging specifications?
![Page 138: The New CSS Layout - Dutch PHP Conference](https://reader033.fdocuments.in/reader033/viewer/2022051400/55bea70bbb61eb92498b477e/html5/thumbnails/138.jpg)
Thank you!
Rachel Andrew
@rachelandrew
http://rachelandrew.co.uk/presentations/new-css-layout