Laying out content on the web is one of the many challenges of responsive web development. Positioning content and ensuring consistent behaviour on smaller to larger screen devices requires hacks and workarounds that can be frustrating to wrestle with and when employed wrongly, can make code harder to maintain. Fortunately, the rise of responsive web development has also increased the number of tools that we can use in order to make our workflow easier. The new CSS Grid specification is one of such examples that gives us the power to control grid structures through CSS instead of HTML making laying out content to be easier. In this talk, I will walk you through the future of laying out content on the web.

1. Layouts in the World of
Mobile Devices
Rakuten Tech Conference 2017
Aysha Anggraini
Rakuten Viki

2. 2
Layouts of the Past
● Floats
● Inline-blocks
● Table display
● Absolute & relative positionings
● Javascript
Previous Tools to Wrestle with Layouts

3. 3
How is it a problem?
Previous tools are not meant to be used for layouts
Layouts of the Past
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante.
A common use case for floats
Name Age
Cersei Lannister 35
Tables - often abused for equal height columns

4. 4
Working with hacks has consequences
Previous Tools are Hacks
Layouts of the Past
● Heavily reliant on the source order of HTML
■ Row wrappers to pull & push margins
■ No good way to order elements <div class="row">
<div class="col s12 l8">
<div class="about"></div>
</div>
<div class="col s12 l4">
<div
class="episodes"></div>
</div>
</div>
About
Trailers
Trailers About
On mobile
On Desktop

5. 5
● Elements have no relationship with one another
■ Floats and equal height columns don’t work well
■ Items do not align as expected
● Complicated CSS and Markups
Column 1
Column 2
Column 3
Column 4

6. 6
Flexbox
Layout mode for working with elements arranged in one
dimension. This works best for equal height columns &
vertical centering of elements. It is not for working with
page layouts.

7. 7
Laying out elements in a single dimensions — rows or columns
Candidates for Flexbox
Layouts of the Present

8. 8
Centering elements
Candidates for Flexbox
Layouts of the Present
Column 1

9. 9
Ordering Elements
Candidates for Flexbox
Layouts of the Present
Column 2 Column 4Column 3 Column 1
Can be done through order properties

10. 10
Flexbox is not enough

11. 11
CSS Grid
Layout mode for working with elements arranged in two
dimension. A true layout system for laying content on
the web.

12. 12
Laying out elements in a two dimensions — rows and columns
The Magic of CSS Grid
Layouts of the Future
● Simpler to use
■ No more relying on markup’s source order
■ Maintainable code

13. 13
<div class="row">
<div class="col s12 l8">
<div class="about"></div>
</div>
<div class="col s12 l4">
<div class="episodes"></div>
</div>
</div>
VS.
<div class="wrapper">
<div class="about"></div>
<div class="episodes"></div>
</div>
Floats CSS Grid

14. 14
<div class="wrapper">
<div class="about"></div>
<div class="episodes"></div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.about {
grid-column: 1 / 2;
}
HTML CSS

15. 15
Position items with grid-column and grid-row
CSS Grid
Layouts of the Future
.wrapper {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-gap: 10px;
}
Column 1 Column 4
Column 5 Column 6
Column 2 Column 3
Column 7

16. 16
Position items with grid-column and grid-row
CSS Grid
Layouts of the Future
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6 Column 7
.column-2 {
grid-column: 2 / span 2;
grid-row: 1 / span 2;
}
.column-4 {
grid-row: 2 / span 2;
}
.column-7 {
grid-column: 3 / span 2;
}

17. 17
The FR Unit
CSS Grid
Layouts of the Future
.wrapper {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-gap: 10px;
}
Can be change to:
1fr 1fr 1fr 1fr or
repeat(4, 1fr)
Column 1 Column 4
Column 5 Column 6
Column 2 Column 3
Column 7

18. 18
The FR Unit
CSS Grid
Layouts of the Future
1/4 1/41/4 1/4
grid-template-columns: 1fr 1fr 1fr 1fr;
2/3 1/3
grid-template-columns: 2fr 1fr;

19. 19
The FR Unit
CSS Grid
Layouts of the Future
.wrapper {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-gap: 10px;
}

20. 20

21. 21
The FR Unit
CSS Grid
Layouts of the Future
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
FR units can be mixed!
25% 25% 1fr 1fr or
500px repeat(2, 1fr)

22. 22
Get creative with grid-template-areas
CSS Grid
Layouts of the Future
Hero
small1 small2
small3 small4 small5 small6 small7
med1
grid-template-areas:
"small1 small2 hero hero hero"
"med1 med1 hero hero hero"
"med1 med1 hero hero hero"
"small3 small4 small5 small6 small7";

23. 23
Flexbox CSS Grid

24. 24
Hero
small1 small2
small3 small4 small5 small6 small7
med1
Grid item can be
displayed as a flex
container

25. 25
Hero
small1 small2
small3 small4 small5 small6 small7
med1
Grid item as flex
Align content inside the items:
.hero { align-items: flex-end }

26. 26
http://cssgridgarden.com/
CSS Grid Garden

27. 27
https://gridbyexample.com/
Grid by Example

28. 28
https://codepen.io/collection/nvggZM/
CSS Grid Experiments

29. 29

30. 30
@supports
Also known as feature queries. Modernizr in CSS. Add
stylesheet rules based on whether your browser supports
one or more CSS feature.

31. 31
// fallback code for older browsers
@supports (display: grid) {
// code for newer browsers
// with overrides of the code above
}

32. 32
.wrapper {
max-width: 1440px;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.hero-item {
width: 70%;
grid-column: 1 / span 3;
}
Will be ignored by
unsupported
browsers

33. 33
.wrapper {
max-width: 1440px;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.hero-item {
width: 70%;
grid-column: 1 / span 3;
}
Will have side effects
on supported
browsers
@supports (display: grid) {
.wrapper > * {
width: auto;
}
}
Reset the width if grid is
supported

34. 34
Do I have to code the same layout twice?
Only if you expect the layout to be the same in all browsers

35. 35
Code
accessible
HTML
Code layout
that works on
all browsers
Progressively
enhance layout
for modern
browsers

36. 36
https://codepen.io/rrenula/full/VMWMWx/
Thumbnail presentation with CSS Grid with
fallback for older browsers

37. 37
https://hacks.mozilla.org/2016/08/using-feature-queries-in-css
Using Feature Queries in CSS

38. 38
aysha.me
@renettarenula
codepen.io/rrenula
Thanks