Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Making the most of
New CSS Layout
Rachel Andrew, 

SmartWeb, Bucharest 2016
Rachel Andrew
rachelandrew.co.uk
@rachelandrew
CSS Working Group Invited Expert
Google Developer Expert for Web Technologi...
Modern CSS Layout?
• Floats
• Inline-block
• display: table
• Absolute & Relative positioning
• Frameworks … lots of frame...
Snippet from
Bootstrap Grid
mark-up.
<div class="row">
<div class="col-md-8">
.col-md-8
<div class="row">
<div class="col-...
Our great hopes for layout
• Flexbox

https://drafts.csswg.org/css-flexbox/
• CSS Grid Layout

https://drafts.csswg.org/cs...
http://caniuse.com/#feat=css-grid
http://gridbyexample.com/browsers
http://caniuse.com/#feat=css-grid
The new CSS for Layout
Items in our layouts understand
themselves as part of a complete
layout.
http://alistapart.com/article/fauxcolumns
http://colintoh.com/blog/display-table-anti-hero
Flexbox
Full height
columns with
flexbox, taking
advantage of
default alignment
values.
.wrapper {
display: flex;
}
.sideb...
Grid Layout
Full height
columns in CSS
Grid Layout.
.wrapper {
display: grid;
grid-template-columns: 30% 70%;
}
.sidebar {...
Separation of source and display
Flexbox
The flex-direction
property can take
a value of row to
display things as a
row or column to
display them as a
colu...
Flexbox
The visual order
can be switched
using row-reverse
or column-
reverse.
nav ul{
display: flex;
justify-content: spa...
Flexbox
Adding display:
flex to our
container element
causes the items
to display flexibly
in a row.
.wrapper {
display: f...
Flexbox
The order
property means
we can change
the order of flex
items using CSS.
This does not
change their
source order....
Grid Layout
I have created a
grid on my
wrapper element.
The grid has 3
equal width
columns.
Rows will be
created as
requi...
Grid Layout
I am positioning
my elements
using CSS Grid
Layout line-based
positioning.
Setting a column
and a row line
usi...
CSS Grid automatic placement
http://www.w3.org/TR/2015/WD-css-grid-1-20150917/#grid-
auto-flow-property
https://rachelandr...
Grid Layout
When using
automatic
placement we
can create rules
for items in our
document - for
example
displaying
portrait...
grid-auto-
flow
The default value of grid-
auto-flow is sparse. Grid will
move forward planning
items skipping cells if it...
Grid Layout
With a dense
packing mode
grid will move
items out of
source order to
backfill spaces.
.wrapper {
display: gri...
grid-auto-
flow
With grid-auto-flow dense
items are displayed out of
source order. Grid backfills
any suitable gaps.
With great power comes
responsibility.
Power and responsibility
• Good = creating the most accessible source
order and using Grid or Flexbox to get the
optimal d...
https://drafts.csswg.org/css-flexbox/#order-accessibility
Authors must use order only for
visual, not logical, reordering ...
Léonie Watson | On CSS
accessibility and drinking tea | CSS
Day 2016
https://vimeo.com/180566024
Control of alignment
CSS Box Alignment Module Level 3
“This module contains the features of CSS relating to the
alignment of boxes within their...
It’s 2016. We can now centre
things.
Box Alignment Properties
- justify-content
- align-content
- justify-self
- align-self
- justify-items
- align-items
Flexbox
The justify-
content property
is set to space-
between.
The items at each
end are placed
against the
container and...
Flexbox
The justify-
content property
is set to space-
around.
The items are
evenly distributed
in the container
with a ha...
Grid
If there is space in
the grid container
after all column
and row tracks
have been added.
Use space-around
and space-
...
Flexbox
The value of align-
items is stretch
by default.
If I add extra text
in one navigation
point the others
all take t...
Flexbox
If I set the value
of align-items to
center then we
get vertical
centring.
nav ul{
display: flex;
justify-content:...
My grid has an
absolute width
and height. This is
larger than
required for the
tracks.
.wrapper {
width: 500px;
height: 40...
The align-content
property controls
the block axis.
This axis aligns
the grid rows.
.wrapper {
width: 500px;
height: 400px...
The justify-
content property
controls the inline
axis.
This axis aligns
the grid columns.
.wrapper {
width: 500px;
height...
I can create this
same layout with
flexbox or Grid.
With flexbox the
items are laid out
in a row.
.wrapper {
display: flex...
The first item is at
the default
stretch and as the
tallest item is
dictating the
height of the flex
container.
The second...
For Grid I use a
single row, 4
column Grid.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
Grid alignment
properties for the
three landscape
images.
.wrapper li:nth-child(2) {
align-self: center;
}
.wrapper li:nth...
100vh
body {
align-content: center;
justify-content: center;
}
Aligning the grid.
body {
height: 100vh;
display: grid;
grid-template-columns: 80%;
align-content: center;
justify-content...
.account {
align-self: end;
}
1fr
1fr
1fr 1fr 1fr
2fr
2fr
.login > div
.login > div
.login > div.actions
Setting align-
items to centre
lines the fields
and labels up on
their centre line.
.login > div {
display: grid;
grid-tem...
Responsive by default
Ethan Marcotte, Fluid Grids
“… every aspect of the grid—and the
elements laid upon it—can be
expressed as a proportion rel...
target ÷ context
= result
h1 {
margin-left: 14.575%; /* 144px / 988px =
0.14575 */
width: 70.85%; /* 700px / 988px = 0.708...
Flexbox
The most simple
flexbox example
demonstrates the
inherent
flexibility.
The items will be
displayed as a
row, with ...
The flex property
• flex-grow - add space
• flex-shrink - remove space
• flex-basis - the initial size before any growing
...
Flexbox
flex: 1 1 300px;
flex-grow: 1
flex-shrink: 1;
flex-basis:
300px;
The initial width
of our li is 300
pixels, howeve...
Flexbox
flex: 1 1 300px;
flex-grow: 1
flex-shrink: 1;
flex-basis:
300px;
If we allow the
flex items to
wrap we can see
how...
Flexbox
flex: 1 1 300px;
flex-grow: 1;
flex-shrink: 1;
flex-basis:
300px;
The 3rd item has
flex: 0 1 300px;
so cannot grow...
Flexbox
If we set the 3rd
item to

flex-grow: 2
This item will be
assigned twice of
much of the
available free
space after...
http://madebymike.com.au/demos/flexbox-tester/
The CSS Grid Layout fr unit
Grid Layout
I am creating
three grid column
tracks, all 1fr in
width.
This gives me
three equally
sized column
tracks.
.wr...
Grid Layout
If I create the first
column as 600
pixels and then
have two 1fr
columns the 600
pixel track is
removed from t...
Grid Layout
With a 600 pixel
column, a 1fr and
a 3fr column. The
600 pixels is
removed from the
available space
then the
r...
Flexbox for 1 dimensional layout.
CSS Grid is for 2 dimensional
layout.
The value of the
grid-template-
columns property
says:
repeat this track
listing, auto-filing
as many columns
with a minim...
Solving common problems
Using the
minmax()
function with
grid-auto-rows.
.home-hero {
display: grid;
grid-gap: 1px;
grid-auto-rows: minmax(150px,
...
An item on the
grid can become a
grid or flex
container itself.
In this case I am
using flexbox and
auto margins to
push m...
Real-world Grid Layout
Say hello to Feature Queries.
I have set three
classes to
display: none;
.has-flex,
.has-grid,
.has-grid-shapes {
display: none;
}
My @supports
rule tests for
support of the
display property
with a value of
flex.
If it is supported
we show the div.
@sup...
My @supports
rule tests for
support of the
display property
with a value of
grid.
If it is supported
we show the div.
@sup...
My @supports
rule tests for
support of the
display property
with a value of
grid AND shape-
outside:circle.
If it is suppo...
http://caniuse.com/#feat=css-featurequeries
Defaults for all
browsers will be
loaded by even
really old
browsers.
body {
padding-top: 20%;
}
h1,
.login,
.account,
.co...
Within a Feature
Query we add
some information
for flexbox
supporting
browsers.
@supports (display: flex) {
body {
padding...
The Feature
Query for Grid
supporting
browsers.
@supports (display: grid) {
body {
display: grid;
grid-template-columns: 8...
Your users ‘grow into’
enhancements as their browsers
auto-update.
https://cssgrid.me/SmartWeb16-code
http://gridbyexample.com
Why are we looking at something I
can’t use yet?
https://wiki.csswg.org/ideas/mistakes
Get involved with developing specs!
• While a spec is being developed your feedback
is wanted and can be included in the s...
Do a good deed for your future self.
Thank you
Slides & Resources: https://cssgrid.me/SmartWeb16-slides
http://csslayout.news - sign up for my weekly CSS Layou...
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Making the most of New CSS Layout
Upcoming SlideShare
Loading in …5
×

Making the most of New CSS Layout

959 views

Published on

My talk on new CSS Layout methods for SmartWeb in Bucharest. Covering Flexbox, CSS Grid, Box Alignment and CSS Feature Queries.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Making the most of New CSS Layout

  1. 1. Making the most of New CSS Layout Rachel Andrew, 
 SmartWeb, Bucharest 2016
  2. 2. Rachel Andrew rachelandrew.co.uk @rachelandrew CSS Working Group Invited Expert Google Developer Expert for Web Technologies Co-founder Perch CMS: https://grabaperch.com Contact: me@rachelandrew.co.uk
  3. 3. Modern CSS Layout? • Floats • Inline-block • display: table • Absolute & Relative positioning • Frameworks … lots of frameworks
  4. 4. Snippet from Bootstrap Grid mark-up. <div class="row"> <div class="col-md-8"> .col-md-8 <div class="row"> <div class="col-md-6"> .col-md-6 </div> <div class="col-md-6"> .col-md-6 </div> </div> </div> <div class="col-md-4"> .col-md-4 </div> </div>
  5. 5. Our great hopes for layout • Flexbox
 https://drafts.csswg.org/css-flexbox/ • CSS Grid Layout
 https://drafts.csswg.org/css-grid/ • Box Alignment
 https://drafts.csswg.org/css-align/
  6. 6. http://caniuse.com/#feat=css-grid
  7. 7. http://gridbyexample.com/browsers
  8. 8. http://caniuse.com/#feat=css-grid
  9. 9. The new CSS for Layout
  10. 10. Items in our layouts understand themselves as part of a complete layout.
  11. 11. http://alistapart.com/article/fauxcolumns
  12. 12. http://colintoh.com/blog/display-table-anti-hero
  13. 13. Flexbox Full height columns with flexbox, taking advantage of default alignment values. .wrapper { display: flex; } .sidebar { flex: 1 1 30%; } .content { flex: 1 1 70%; }
  14. 14. Grid Layout Full height columns in CSS Grid Layout. .wrapper { display: grid; grid-template-columns: 30% 70%; } .sidebar { grid-column: 1; } .content { grid-column: 2; }
  15. 15. Separation of source and display
  16. 16. Flexbox The flex-direction property can take a value of row to display things as a row or column to display them as a column. nav ul{ display: flex; justify-content: space-between; flex-direction: row; }
  17. 17. Flexbox The visual order can be switched using row-reverse or column- reverse. nav ul{ display: flex; justify-content: space-between; flex-direction: row-reverse; }
  18. 18. Flexbox Adding display: flex to our container element causes the items to display flexibly in a row. .wrapper { display: flex; }
  19. 19. Flexbox The order property means we can change the order of flex items using CSS. This does not change their source order. li:nth-child(1) { order: 3; } li:nth-child(2) { order: 1; } li:nth-child(3) { order: 4; } li:nth-child(4) { order: 2; }
  20. 20. Grid Layout I have created a grid on my wrapper element. The grid has 3 equal width columns. Rows will be created as required as we position items into them. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  21. 21. Grid Layout I am positioning my elements using CSS Grid Layout line-based positioning. Setting a column and a row line using the grid- column and grid- row properties. li:nth-child(1) { grid-column: 3 ; grid-row: 2 ; } li:nth-child(2) { grid-column: 1 ; grid-row: 2 ; } li:nth-child(3) { grid-column: 1 ; grid-row: 1 ; } li:nth-child(4) { grid-column: 2 ; grid-row: 1 ; }
  22. 22. CSS Grid automatic placement http://www.w3.org/TR/2015/WD-css-grid-1-20150917/#grid- auto-flow-property https://rachelandrew.co.uk/archives/2015/04/14/grid-layout- automatic-placement-and-packing-modes/
  23. 23. Grid Layout When using automatic placement we can create rules for items in our document - for example displaying portrait and landscape images differently. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; } .landscape { grid-column-end: span 2; }
  24. 24. grid-auto- flow The default value of grid- auto-flow is sparse. Grid will move forward planning items skipping cells if items do not fit .
  25. 25. Grid Layout With a dense packing mode grid will move items out of source order to backfill spaces. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-auto-flow: dense; } .landscape { grid-column-end: span 2; }
  26. 26. grid-auto- flow With grid-auto-flow dense items are displayed out of source order. Grid backfills any suitable gaps.
  27. 27. With great power comes responsibility.
  28. 28. Power and responsibility • Good = creating the most accessible source order and using Grid or Flexbox to get the optimal display for each device. • Bad = using Grid or Flexbox as an excuse to forget about the source. • Terrible - stripping out semantic elements to make everything a grid or flex item.
  29. 29. https://drafts.csswg.org/css-flexbox/#order-accessibility Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non- conforming.
  30. 30. Léonie Watson | On CSS accessibility and drinking tea | CSS Day 2016 https://vimeo.com/180566024
  31. 31. Control of alignment
  32. 32. CSS Box Alignment Module Level 3 “This module contains the features of CSS relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout.” - https://drafts.csswg.org/css-align/
  33. 33. It’s 2016. We can now centre things.
  34. 34. Box Alignment Properties - justify-content - align-content - justify-self - align-self - justify-items - align-items
  35. 35. Flexbox The justify- content property is set to space- between. The items at each end are placed against the container and the remaining space distributed evenly. nav ul{ display: flex; justify-content: space-between; flex-direction: row; }
  36. 36. Flexbox The justify- content property is set to space- around. The items are evenly distributed in the container with a half size space at each end. nav ul{ display: flex; justify-content: space-around; flex-direction: row; }
  37. 37. Grid If there is space in the grid container after all column and row tracks have been added. Use space-around and space- between to space the tracks. .wrapper { width: 500px; height: 400px; display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 80px); grid-template-rows: repeat(3,100px); align-content: space-around; justify-content: space-between; }
  38. 38. Flexbox The value of align- items is stretch by default. If I add extra text in one navigation point the others all take the same height. nav ul{ display: flex; justify-content: space-around; flex-direction: row; align-items: stretch; }
  39. 39. Flexbox If I set the value of align-items to center then we get vertical centring. nav ul{ display: flex; justify-content: space-around; flex-direction: row; align-items: center; }
  40. 40. My grid has an absolute width and height. This is larger than required for the tracks. .wrapper { width: 500px; height: 400px; display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 80px); grid-template-rows: repeat(3,100px); }
  41. 41. The align-content property controls the block axis. This axis aligns the grid rows. .wrapper { width: 500px; height: 400px; display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 80px); grid-template-rows: repeat(3,100px); align-content: end; }
  42. 42. The justify- content property controls the inline axis. This axis aligns the grid columns. .wrapper { width: 500px; height: 400px; display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 80px); grid-template-rows: repeat(3,100px); align-content: end; justify-content: center; }
  43. 43. I can create this same layout with flexbox or Grid. With flexbox the items are laid out in a row. .wrapper { display: flex; } .wrapper li { flex: 1 0 25%; }
  44. 44. The first item is at the default stretch and as the tallest item is dictating the height of the flex container. The second is entered in the container. The third aligned to the start. The fourth aligned to the end. .wrapper li:nth-child(2) { align-self: center; } .wrapper li:nth-child(3) { align-self: flex-start; } .wrapper li:nth-child(4) { align-self: flex-end; }
  45. 45. For Grid I use a single row, 4 column Grid. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
  46. 46. Grid alignment properties for the three landscape images. .wrapper li:nth-child(2) { align-self: center; } .wrapper li:nth-child(3) { align-self: start; } .wrapper li:nth-child(4) { align-self: end; }
  47. 47. 100vh body { align-content: center; justify-content: center; }
  48. 48. Aligning the grid. body { height: 100vh; display: grid; grid-template-columns: 80%; align-content: center; justify-content: center; }
  49. 49. .account { align-self: end; }
  50. 50. 1fr 1fr 1fr 1fr 1fr 2fr 2fr .login > div .login > div .login > div.actions
  51. 51. Setting align- items to centre lines the fields and labels up on their centre line. .login > div { display: grid; grid-template-columns: 1fr 2fr; align-items: center; } .login > div.actions { grid-template-columns: 1fr 1fr 1fr; }
  52. 52. Responsive by default
  53. 53. Ethan Marcotte, Fluid Grids “… every aspect of the grid—and the elements laid upon it—can be expressed as a proportion relative to its container.”
  54. 54. target ÷ context = result h1 { margin-left: 14.575%; /* 144px / 988px = 0.14575 */ width: 70.85%; /* 700px / 988px = 0.7085 */ }
  55. 55. Flexbox The most simple flexbox example demonstrates the inherent flexibility. The items will be displayed as a row, with equal space between each item. nav ul{ display: flex; justify-content: space-between; }
  56. 56. The flex property • flex-grow - add space • flex-shrink - remove space • flex-basis - the initial size before any growing or shrinking
  57. 57. Flexbox flex: 1 1 300px; flex-grow: 1 flex-shrink: 1; flex-basis: 300px; The initial width of our li is 300 pixels, however it can grow larger and shrink smaller than 300 pixels. .wrapper { display: flex; } .wrapper li { flex: 1 1 300px; min-width: 1px; }
  58. 58. Flexbox flex: 1 1 300px; flex-grow: 1 flex-shrink: 1; flex-basis: 300px; If we allow the flex items to wrap we can see how flex-basis works by dragging the window smaller. .wrapper { display: flex; flex-flow: row wrap; justify-content: space-around; } .wrapper li { flex: 1 1 300px; min-width: 1px; }
  59. 59. Flexbox flex: 1 1 300px; flex-grow: 1; flex-shrink: 1; flex-basis: 300px; The 3rd item has flex: 0 1 300px; so cannot grow. .wrapper { display: flex; } .wrapper li { flex: 1 1 300px; min-width: 1px; } .wrapper li:nth-child(3) { flex: 0 1 300px; }
  60. 60. Flexbox If we set the 3rd item to
 flex-grow: 2 This item will be assigned twice of much of the available free space after we have reached the 300 pixel initial width. .wrapper { display: flex; } .wrapper li { flex: 1 1 300px; min-width: 1px; } .wrapper li:nth-child(3) { flex: 2 1 300px; }
  61. 61. http://madebymike.com.au/demos/flexbox-tester/
  62. 62. The CSS Grid Layout fr unit
  63. 63. Grid Layout I am creating three grid column tracks, all 1fr in width. This gives me three equally sized column tracks. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  64. 64. Grid Layout If I create the first column as 600 pixels and then have two 1fr columns the 600 pixel track is removed from the available space and the remainder is distributed equally between the two columns. .wrapper { display: grid; grid-template-columns: 600px 1fr 1fr; }
  65. 65. Grid Layout With a 600 pixel column, a 1fr and a 3fr column. The 600 pixels is removed from the available space then the remaining space is divided by 4. The 1fr column gets 25% and the 3fr column 75%. .wrapper { display: grid; grid-template-columns: 600px 1fr 3fr; }
  66. 66. Flexbox for 1 dimensional layout. CSS Grid is for 2 dimensional layout.
  67. 67. The value of the grid-template- columns property says: repeat this track listing, auto-filing as many columns with a minimum width of 300 pixels and a maximum of 1fr. .wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  68. 68. Solving common problems
  69. 69. Using the minmax() function with grid-auto-rows. .home-hero { display: grid; grid-gap: 1px; grid-auto-rows: minmax(150px, auto); }
  70. 70. An item on the grid can become a grid or flex container itself. In this case I am using flexbox and auto margins to push my content to the bottom of the box. .special { display: flex; flex-direction: column; } .special h3{ margin-top: auto; }
  71. 71. Real-world Grid Layout
  72. 72. Say hello to Feature Queries.
  73. 73. I have set three classes to display: none; .has-flex, .has-grid, .has-grid-shapes { display: none; }
  74. 74. My @supports rule tests for support of the display property with a value of flex. If it is supported we show the div. @supports (display: flex) { .has-flex { display: block; } }
  75. 75. My @supports rule tests for support of the display property with a value of grid. If it is supported we show the div. @supports (display: grid) { .has-grid { display: block; } }
  76. 76. My @supports rule tests for support of the display property with a value of grid AND shape- outside:circle. If it is supported we show the div. @supports (display: grid) and (shape-outside:circle()) { .has-grid-shapes { display: block; } }
  77. 77. http://caniuse.com/#feat=css-featurequeries
  78. 78. Defaults for all browsers will be loaded by even really old browsers. body { padding-top: 20%; } h1, .login, .account, .contact{ width:80%; margin: 0 auto; }
  79. 79. Within a Feature Query we add some information for flexbox supporting browsers. @supports (display: flex) { body { padding:0; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; } h1, .login, .account, .contact { margin: 0; width: 80%; } }
  80. 80. The Feature Query for Grid supporting browsers. @supports (display: grid) { body { display: grid; grid-template-columns: 80%; align-content: center; align-items: stretch; } @media (min-width: 650px) { body { grid-template-columns: repeat(2, minmax(150px, 30%)); } h1, .login { grid-column-end: span 2; width: auto; } .login > div { display: grid; grid-template-columns: 1fr 2fr; align-items: center; } .login > div.actions { grid-template-columns: 1fr 1fr 1fr; } .account { border-right: 1px dotted rgb(191, 216, 227); padding: 0 10px 0 0; align-self: end; width: auto; } .contact { padding: 0 0 0 10px; width: auto; } } }
  81. 81. Your users ‘grow into’ enhancements as their browsers auto-update.
  82. 82. https://cssgrid.me/SmartWeb16-code
  83. 83. http://gridbyexample.com
  84. 84. Why are we looking at something I can’t use yet?
  85. 85. https://wiki.csswg.org/ideas/mistakes
  86. 86. Get involved with developing specs! • While a spec is being developed your feedback is wanted and can be included in the spec. • Wait until browsers ship and you lose that chance. • It just got easier. CSS Spec issues are now on GitHub.
 http://logs.csswg.org/irc.w3.org/css/2016-05-10/#e684439
  87. 87. Do a good deed for your future self.
  88. 88. Thank you Slides & Resources: https://cssgrid.me/SmartWeb16-slides http://csslayout.news - sign up for my weekly CSS Layout email — @rachelandrew | me@rachelandrew.co.uk — https://rachelandrew.co.uk | https://grabaperch.com

×