Rachel Andrew, profile picture
Uploaded byRachel Andrew
PDF, PPTX1,345 views

Making the most of New CSS Layout

The document discusses modern CSS layout techniques, focusing on Flexbox and CSS Grid as powerful tools for responsive design. It highlights the importance of semantic source order and accessibility while utilizing these layouts and emphasizes best practices for alignment and distribution. Additionally, it covers practical usage examples and feature queries to ensure compatibility across different browsers.

Embed presentation

Download as PDF, PPTX
1 / 105
2 / 105
3 / 105
4 / 105
5 / 105
6 / 105
7 / 105
8 / 105
9 / 105
10 / 105
11 / 105
12 / 105
13 / 105
14 / 105
15 / 105
16 / 105
17 / 105
18 / 105
19 / 105
20 / 105
21 / 105
22 / 105
23 / 105
24 / 105
25 / 105
26 / 105
27 / 105
28 / 105
29 / 105
30 / 105
31 / 105
32 / 105
33 / 105
34 / 105
35 / 105
36 / 105
37 / 105
38 / 105
39 / 105
40 / 105
41 / 105
42 / 105
43 / 105
44 / 105
45 / 105
46 / 105
47 / 105
48 / 105
49 / 105
50 / 105
51 / 105
52 / 105
53 / 105
54 / 105
55 / 105
56 / 105
57 / 105
58 / 105
59 / 105
60 / 105
61 / 105
62 / 105
63 / 105
64 / 105
65 / 105
66 / 105
67 / 105
68 / 105
69 / 105
70 / 105
71 / 105
72 / 105
73 / 105
74 / 105
75 / 105
76 / 105
77 / 105
78 / 105
79 / 105
80 / 105
81 / 105
82 / 105
83 / 105
84 / 105
85 / 105
86 / 105
87 / 105
88 / 105
89 / 105
90 / 105
91 / 105
92 / 105
93 / 105
94 / 105
95 / 105
96 / 105
97 / 105
98 / 105
99 / 105
100 / 105
101 / 105
102 / 105
103 / 105
104 / 105
105 / 105
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 Technologies Co-founder Perch CMS: https://grabaperch.com Contact: me@rachelandrew.co.uk
Modern CSS Layout? • Floats • Inline-block • display: table • Absolute & Relative positioning • Frameworks … lots of frameworks
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>
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/
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; } .sidebar { flex: 1 1 30%; } .content { flex: 1 1 70%; }
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; }
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 column. nav ul{ display: flex; justify-content: space-between; flex-direction: row; }
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; }
Flexbox Adding display: flex to our container element causes the items to display flexibly in a row. .wrapper { display: flex; }
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; }
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; }
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 ; }
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/
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; }
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 .
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; }
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 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.
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.
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 containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout.” - https://drafts.csswg.org/css-align/
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 the remaining space distributed evenly. nav ul{ display: flex; justify-content: space-between; flex-direction: row; }
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; }
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; }
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; }
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; }
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); }
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; }
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; }
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%; }
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; }
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-child(3) { align-self: start; } .wrapper li:nth-child(4) { align-self: end; }
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: center; }
.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-template-columns: 1fr 2fr; align-items: center; } .login > div.actions { grid-template-columns: 1fr 1fr 1fr; }
Responsive by default
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.”
target ÷ context = result h1 { margin-left: 14.575%; /* 144px / 988px = 0.14575 */ width: 70.85%; /* 700px / 988px = 0.7085 */ }
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; }
The flex property • flex-grow - add space • flex-shrink - remove space • flex-basis - the initial size before any growing or shrinking
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; }
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; }
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; }
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; }
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. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; }
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; }
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; }
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 minimum width of 300 pixels and a maximum of 1fr. .wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
Solving common problems
Using the minmax() function with grid-auto-rows. .home-hero { display: grid; grid-gap: 1px; grid-auto-rows: minmax(150px, auto); }
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; }
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. @supports (display: flex) { .has-flex { display: block; } }
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; } }
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; } }
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, .contact{ width:80%; margin: 0 auto; }
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%; } }
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; } } }
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 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
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 Layout email — @rachelandrew | me@rachelandrew.co.uk — https://rachelandrew.co.uk | https://grabaperch.com

More Related Content

PDF
GOTO Berlin - You can use CSS for that
byRachel Andrew
 
PDF
The Right Layout Tool for the Job
byRachel Andrew
 
PDF
Talk Web Design: Get Ready For CSS Grid Layout
byRachel Andrew
 
PDF
New CSS Meets the Real World
byRachel Andrew
 
PDF
Laracon Online: Grid and Flexbox
byRachel Andrew
 
PDF
CSS Grid Layout for Frontend NE
byRachel Andrew
 
PDF
AEA Chicago CSS Grid Layout
byRachel Andrew
 
PDF
Render Conf: Start using CSS Grid Layout Today
byRachel Andrew
 
GOTO Berlin - You can use CSS for that
byRachel Andrew
 
The Right Layout Tool for the Job
byRachel Andrew
 
Talk Web Design: Get Ready For CSS Grid Layout
byRachel Andrew
 
New CSS Meets the Real World
byRachel Andrew
 
Laracon Online: Grid and Flexbox
byRachel Andrew
 
CSS Grid Layout for Frontend NE
byRachel Andrew
 
AEA Chicago CSS Grid Layout
byRachel Andrew
 
Render Conf: Start using CSS Grid Layout Today
byRachel Andrew
 

What's hot

PDF
Next-level CSS
byRachel Andrew
 
PDF
Confoo: The New CSS Layout
byRachel Andrew
 
PDF
CSS Grid Layout
byRachel Andrew
 
PDF
CSSConf.asia - Laying out the future
byRachel Andrew
 
PDF
Introducing CSS Grid Layout
byRachel Andrew
 
PDF
Laying out the future
byRachel Andrew
 
PDF
CSS Grid Layout - An Event Apart Orlando
byRachel Andrew
 
PDF
CSS Grid Layout - All Things Open
byRachel Andrew
 
PDF
Flexbox and Grid Layout
byRachel Andrew
 
PDF
CSS Day: CSS Grid Layout
byRachel Andrew
 
PDF
Frontend United: Start using CSS Grid Layout today!
byRachel Andrew
 
PDF
Grid and Flexbox - Smashing Conf SF
byRachel Andrew
 
PDF
CSS Grid for html5j
byRachel Andrew
 
PDF
Confoo: You can use CSS for that!
byRachel Andrew
 
PDF
An Event Apart Nashville: CSS Grid Layout
byRachel Andrew
 
PDF
The New CSS Layout - dotCSS
byRachel Andrew
 
PDF
An Event Apart Seattle - New CSS Layout Meets the Real World
byRachel Andrew
 
PDF
Future Layout & Performance
byRachel Andrew
 
PDF
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
byIgalia
 
PDF
Introduction to CSS Grid Layout
byRachel Andrew
 
Next-level CSS
byRachel Andrew
 
Confoo: The New CSS Layout
byRachel Andrew
 
CSS Grid Layout
byRachel Andrew
 
CSSConf.asia - Laying out the future
byRachel Andrew
 
Introducing CSS Grid Layout
byRachel Andrew
 
Laying out the future
byRachel Andrew
 
CSS Grid Layout - An Event Apart Orlando
byRachel Andrew
 
CSS Grid Layout - All Things Open
byRachel Andrew
 
Flexbox and Grid Layout
byRachel Andrew
 
CSS Day: CSS Grid Layout
byRachel Andrew
 
Frontend United: Start using CSS Grid Layout today!
byRachel Andrew
 
Grid and Flexbox - Smashing Conf SF
byRachel Andrew
 
CSS Grid for html5j
byRachel Andrew
 
Confoo: You can use CSS for that!
byRachel Andrew
 
An Event Apart Nashville: CSS Grid Layout
byRachel Andrew
 
The New CSS Layout - dotCSS
byRachel Andrew
 
An Event Apart Seattle - New CSS Layout Meets the Real World
byRachel Andrew
 
Future Layout & Performance
byRachel Andrew
 
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
byIgalia
 
Introduction to CSS Grid Layout
byRachel Andrew
 

Similar to Making the most of New CSS Layout

PDF
CSS Conf Budapest - New CSS Layout
byRachel Andrew
 
PDF
Flexbox and Grid Layout
byRachel Andrew
 
PDF
Fluent: Making Sense of the New CSS Layout
byRachel Andrew
 
PDF
ConFoo 2016: Making Sense of CSS Layout
byRachel Andrew
 
PDF
But what about old browsers?
byRachel Andrew
 
PDF
Start Using CSS Grid Layout Today - RuhrJS
byRachel Andrew
 
PDF
Laying out the future with grid & flexbox - Smashing Conf Freiburg
byRachel Andrew
 
PPTX
CSS Flexbox and Grid: The future of website layouts - DN Scrum Breakfast - Au...
byScrum Breakfast Vietnam
 
PDF
Better Layouts with Flexbox + CSS Grids
bySamantha Provenza
 
PDF
CSS Grid Layout
byRachel Andrew
 
PDF
DevFest Nantes - Start Using CSS Grid Layout today
byRachel Andrew
 
PDF
Evergreen websites for Evergreen browsers
byRachel Andrew
 
PDF
The Future of CSS Layout
byZoe Gillenwater
 
PDF
An Event Apart SF: CSS Grid Layout
byRachel Andrew
 
PDF
CSS Grid Layout for Topconf, Linz
byRachel Andrew
 
PDF
Devoxx Belgium: CSS Grid Layout
byRachel Andrew
 
PDF
Solving Layout Problems with CSS Grid & Friends - DevFest17
byRachel Andrew
 
PDF
View Source London: Solving Layout Problems with CSS Grid & Friends
byRachel Andrew
 
PPTX
Full Stack Development CSS_Layouts,Grid,FlexboxPPT.pptx
byganeshchettipalli
 
PDF
CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)
byIgalia
 
CSS Conf Budapest - New CSS Layout
byRachel Andrew
 
Flexbox and Grid Layout
byRachel Andrew
 
Fluent: Making Sense of the New CSS Layout
byRachel Andrew
 
ConFoo 2016: Making Sense of CSS Layout
byRachel Andrew
 
But what about old browsers?
byRachel Andrew
 
Start Using CSS Grid Layout Today - RuhrJS
byRachel Andrew
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
byRachel Andrew
 
CSS Flexbox and Grid: The future of website layouts - DN Scrum Breakfast - Au...
byScrum Breakfast Vietnam
 
Better Layouts with Flexbox + CSS Grids
bySamantha Provenza
 
CSS Grid Layout
byRachel Andrew
 
DevFest Nantes - Start Using CSS Grid Layout today
byRachel Andrew
 
Evergreen websites for Evergreen browsers
byRachel Andrew
 
The Future of CSS Layout
byZoe Gillenwater
 
An Event Apart SF: CSS Grid Layout
byRachel Andrew
 
CSS Grid Layout for Topconf, Linz
byRachel Andrew
 
Devoxx Belgium: CSS Grid Layout
byRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - DevFest17
byRachel Andrew
 
View Source London: Solving Layout Problems with CSS Grid & Friends
byRachel Andrew
 
Full Stack Development CSS_Layouts,Grid,FlexboxPPT.pptx
byganeshchettipalli
 
CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)
byIgalia
 

More from Rachel Andrew

PDF
All Day Hey! Unlocking The Power of CSS Grid Layout
byRachel Andrew
 
PDF
SmashingConf SF: Unlocking the Power of CSS Grid Layout
byRachel Andrew
 
PDF
Unlocking the Power of CSS Grid Layout
byRachel Andrew
 
PDF
The Creative New World of CSS
byRachel Andrew
 
PDF
Into the Weeds of CSS Layout
byRachel Andrew
 
PDF
Graduating to Grid
byRachel Andrew
 
PDF
404.ie: Solving Layout Problems with CSS Grid & Friends
byRachel Andrew
 
PDF
Solving Layout Problems with CSS Grid & Friends - WEBU17
byRachel Andrew
 
PDF
Solving Layout Problems with CSS Grid & Friends - NordicJS
byRachel Andrew
 
PDF
Google Developers Experts Summit 2017 - CSS Layout
byRachel Andrew
 
PDF
Web Summer Camp Keynote
byRachel Andrew
 
PDF
New CSS Layout Meets the Real World
byRachel Andrew
 
PDF
An Event Apart DC - New CSS Layout meets the Real World
byRachel Andrew
 
PDF
Perch, Patterns and Old Browsers
byRachel Andrew
 
PDF
What I discovered about layout vis CSS Grid
byRachel Andrew
 
PDF
Where does CSS come from?
byRachel Andrew
 
All Day Hey! Unlocking The Power of CSS Grid Layout
byRachel Andrew
 
SmashingConf SF: Unlocking the Power of CSS Grid Layout
byRachel Andrew
 
Unlocking the Power of CSS Grid Layout
byRachel Andrew
 
The Creative New World of CSS
byRachel Andrew
 
Into the Weeds of CSS Layout
byRachel Andrew
 
Graduating to Grid
byRachel Andrew
 
404.ie: Solving Layout Problems with CSS Grid & Friends
byRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
byRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
byRachel Andrew
 
Google Developers Experts Summit 2017 - CSS Layout
byRachel Andrew
 
Web Summer Camp Keynote
byRachel Andrew
 
New CSS Layout Meets the Real World
byRachel Andrew
 
An Event Apart DC - New CSS Layout meets the Real World
byRachel Andrew
 
Perch, Patterns and Old Browsers
byRachel Andrew
 
What I discovered about layout vis CSS Grid
byRachel Andrew
 
Where does CSS come from?
byRachel Andrew
 

Recently uploaded

PDF
[BDD 2025 - Artificial Intelligence] AI for the Underdogs: Innovation for Sma...
byWintari Yasmin
 
PDF
Mulesoft Meetup Online Portuguese: MCP e IA
byPedro Baroni
 
PDF
[DevFest Strasbourg 2025] - NodeJs Can do that !!
bymoassiongbon
 
PDF
PCCC25（設立25年記念PCクラスタシンポジウム）：エヌビディア合同会社 テーマ２「NVIDIA BlueField-4 DPU」
byPC Cluster Consortium
 
PDF
The partnership effect: Libraries and publishers on collaborating and thrivin...
byBookNet Canada
 
PPTX
Guardrails in Action - Ensuring Safe AI with Azure AI Content Safety.pptx
byUdaiappa Ramachandran
 
PPTX
Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]
byUiPathCommunity
 
PDF
Mastering Agentic Orchestration with UiPath Maestro | Hands on Workshop
byUiPathCommunity
 
PDF
Lets Build a Serverless Function with Kiro
byChris Bingham
 
PPTX
MuleSoft AI Series : Introduction to MCP
byMulesoftMunichMeetup
 
PDF
Cheryl Hung, Vibe Coding Auth Without Melting Down! isaqb Software Architectu...
byCheryl Hung
 
PDF
Transcript: The partnership effect: Libraries and publishers on collaborating...
byBookNet Canada
 
PDF
Agentic Intro and Hands-on: Build your first Coded Agent
byUiPathCommunity
 
PDF
Parallel Computing BCS702 Module notes of the vtu college 7th sem 4.pdf
byMatheshVishnu
 
PDF
ODSC AI West: Agent Optimization: Beyond Context engineering
byShashikant Jagtap
 
PDF
[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...
byWintari Yasmin
 
PDF
5 Common Supply Chain Attacks and How They Work | CyberPro Magazine
byCyberPro Magazine
 
PDF
Transforming Supply Chains with Amazon Bedrock AgentCore (AWS Swiss User Grou...
byChris Bingham
 
PDF
MuleSoft Meetup: Dreamforce'25 Tour- Vibing With AI & Agents.pdf
byTintu Jacob Shaji
 
PDF
[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...
bywintari3
 
[BDD 2025 - Artificial Intelligence] AI for the Underdogs: Innovation for Sma...
byWintari Yasmin
 
Mulesoft Meetup Online Portuguese: MCP e IA
byPedro Baroni
 
[DevFest Strasbourg 2025] - NodeJs Can do that !!
bymoassiongbon
 
PCCC25（設立25年記念PCクラスタシンポジウム）：エヌビディア合同会社 テーマ２「NVIDIA BlueField-4 DPU」
byPC Cluster Consortium
 
The partnership effect: Libraries and publishers on collaborating and thrivin...
byBookNet Canada
 
Guardrails in Action - Ensuring Safe AI with Azure AI Content Safety.pptx
byUdaiappa Ramachandran
 
Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]
byUiPathCommunity
 
Mastering Agentic Orchestration with UiPath Maestro | Hands on Workshop
byUiPathCommunity
 
Lets Build a Serverless Function with Kiro
byChris Bingham
 
MuleSoft AI Series : Introduction to MCP
byMulesoftMunichMeetup
 
Cheryl Hung, Vibe Coding Auth Without Melting Down! isaqb Software Architectu...
byCheryl Hung
 
Transcript: The partnership effect: Libraries and publishers on collaborating...
byBookNet Canada
 
Agentic Intro and Hands-on: Build your first Coded Agent
byUiPathCommunity
 
Parallel Computing BCS702 Module notes of the vtu college 7th sem 4.pdf
byMatheshVishnu
 
ODSC AI West: Agent Optimization: Beyond Context engineering
byShashikant Jagtap
 
[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...
byWintari Yasmin
 
5 Common Supply Chain Attacks and How They Work | CyberPro Magazine
byCyberPro Magazine
 
Transforming Supply Chains with Amazon Bedrock AgentCore (AWS Swiss User Grou...
byChris Bingham
 
MuleSoft Meetup: Dreamforce'25 Tour- Vibing With AI & Agents.pdf
byTintu Jacob Shaji
 
[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...
bywintari3
 

Making the most of New CSS Layout

  • 1.
    Making the mostof New CSS Layout Rachel Andrew, 
 SmartWeb, Bucharest 2016
  • 2.
    Rachel Andrew rachelandrew.co.uk @rachelandrew CSS WorkingGroup Invited Expert Google Developer Expert for Web Technologies Co-founder Perch CMS: https://grabaperch.com Contact: me@rachelandrew.co.uk
  • 3.
    Modern CSS Layout? •Floats • Inline-block • display: table • Absolute & Relative positioning • Frameworks … lots of frameworks
  • 4.
    Snippet from Bootstrap Grid mark-up. <divclass="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.
    Our great hopesfor 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.
  • 7.
  • 8.
  • 9.
    The new CSSfor Layout
  • 10.
    Items in ourlayouts understand themselves as part of a complete layout.
  • 11.
  • 12.
  • 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.
    Grid Layout Full height columnsin CSS Grid Layout. .wrapper { display: grid; grid-template-columns: 30% 70%; } .sidebar { grid-column: 1; } .content { grid-column: 2; }
  • 15.
  • 16.
    Flexbox The flex-direction property cantake 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.
    Flexbox The visual order canbe switched using row-reverse or column- reverse. nav ul{ display: flex; justify-content: space-between; flex-direction: row-reverse; }
  • 18.
    Flexbox Adding display: flex toour container element causes the items to display flexibly in a row. .wrapper { display: flex; }
  • 19.
    Flexbox The order property means wecan 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.
    Grid Layout I havecreated 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.
    Grid Layout I ampositioning 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 ; }
  • 23.
    CSS Grid automaticplacement 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/
  • 25.
    Grid Layout When using automatic placementwe 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; }
  • 26.
    grid-auto- flow The default valueof grid- auto-flow is sparse. Grid will move forward planning items skipping cells if items do not fit .
  • 27.
    Grid Layout With adense 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; }
  • 28.
    grid-auto- flow With grid-auto-flow dense itemsare displayed out of source order. Grid backfills any suitable gaps.
  • 29.
    With great powercomes responsibility.
  • 30.
    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.
  • 31.
    https://drafts.csswg.org/css-flexbox/#order-accessibility Authors must useorder only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non- conforming.
  • 32.
    Léonie Watson |On CSS accessibility and drinking tea | CSS Day 2016 https://vimeo.com/180566024
  • 33.
  • 34.
    CSS Box AlignmentModule 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/
  • 35.
    It’s 2016. Wecan now centre things.
  • 36.
    Box Alignment Properties -justify-content - align-content - justify-self - align-self - justify-items - align-items
  • 37.
    Flexbox The justify- content property isset 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; }
  • 38.
    Flexbox The justify- content property isset 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; }
  • 39.
    Grid If there isspace 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; }
  • 40.
    Flexbox The value ofalign- 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; }
  • 41.
    Flexbox If I setthe 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; }
  • 42.
    My grid hasan 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); }
  • 43.
    The align-content property controls theblock 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; }
  • 44.
    The justify- content property controlsthe 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; }
  • 45.
    I can createthis 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%; }
  • 46.
    The first itemis 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; }
  • 47.
    For Grid Iuse a single row, 4 column Grid. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
  • 48.
    Grid alignment properties forthe 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; }
  • 50.
  • 51.
    Aligning the grid. body{ height: 100vh; display: grid; grid-template-columns: 80%; align-content: center; justify-content: center; }
  • 52.
  • 53.
    1fr 1fr 1fr 1fr 1fr 2fr 2fr .login> div .login > div .login > div.actions
  • 54.
    Setting align- items tocentre 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; }
  • 55.
  • 56.
    Ethan Marcotte, FluidGrids “… every aspect of the grid—and the elements laid upon it—can be expressed as a proportion relative to its container.”
  • 57.
    target ÷ context =result h1 { margin-left: 14.575%; /* 144px / 988px = 0.14575 */ width: 70.85%; /* 700px / 988px = 0.7085 */ }
  • 58.
    Flexbox The most simple flexboxexample 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; }
  • 59.
    The flex property •flex-grow - add space • flex-shrink - remove space • flex-basis - the initial size before any growing or shrinking
  • 60.
    Flexbox flex: 1 1300px; 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; }
  • 62.
    Flexbox flex: 1 1300px; 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; }
  • 64.
    Flexbox flex: 1 1300px; 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; }
  • 66.
    Flexbox If we setthe 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; }
  • 68.
  • 69.
    The CSS GridLayout fr unit
  • 70.
    Grid Layout I amcreating 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; }
  • 71.
    Grid Layout If Icreate 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; }
  • 72.
    Grid Layout With a600 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; }
  • 74.
    Flexbox for 1dimensional layout. CSS Grid is for 2 dimensional layout.
  • 76.
    The value ofthe 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)); }
  • 78.
  • 82.
    Using the minmax() function with grid-auto-rows. .home-hero{ display: grid; grid-gap: 1px; grid-auto-rows: minmax(150px, auto); }
  • 83.
    An item onthe 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; }
  • 85.
  • 86.
    Say hello toFeature Queries.
  • 87.
    I have setthree classes to display: none; .has-flex, .has-grid, .has-grid-shapes { display: none; }
  • 88.
    My @supports rule testsfor 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; } }
  • 89.
    My @supports rule testsfor 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; } }
  • 90.
    My @supports rule testsfor 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; } }
  • 91.
  • 93.
    Defaults for all browserswill be loaded by even really old browsers. body { padding-top: 20%; } h1, .login, .account, .contact{ width:80%; margin: 0 auto; }
  • 95.
    Within a Feature Querywe 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%; } }
  • 97.
    The Feature Query forGrid 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; } } }
  • 98.
    Your users ‘growinto’ enhancements as their browsers auto-update.
  • 99.
  • 100.
  • 101.
    Why are welooking at something I can’t use yet?
  • 102.
  • 103.
    Get involved withdeveloping 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
  • 104.
    Do a gooddeed for your future self.
  • 105.
    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