Layouts in the world of mobile devices
Rakuten Tech Conf 2017
@renettarenula
Aysha Anggraini
@renettarenula
aysha.me
codepen.io/rrenula
Old Grid System
-
Floats
-
Inline-blocks
CSS Grid
-
Better layout system
-
Simpler than current grid-based frameworksÂ
-
Not affected by source order of HTML
<div class="row">
<div class="col s12">
<div class="header"></div>
</div>
</div>
<div class="row">
<div class="col s12 l8">
<div class="about"></div>
</div>
<div class="col s12 l4">
<div class="episodes"></div>
</div>
</div>Current grid system
-
Row wrappers
-
Floats clearing
-
Complicated Markup
<!-- HTML -->
<div class="wrapper">
<div class="header"></div>
<div class="about"></div>
<div class="episodes"></div>
</div>CSS Grid
-
No row wrappers
-
CSS instead of HTML
-
Simpler Markup
.wrapper {
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
display: grid;
}
.header {
grid-column: 1fr;
}
1
2
3
1
2
3
What about browser support?
Think of layout as an enhancement
@support
Feature Queries
.wrapper {
display: grid;
grid-gap: 40px;
grid-template-columns: repeat(2, 1fr);
@media (min-width: 728px) {
width: 25%;
grid-template-columns: repeat(4, 1fr);
}
}
article {
// for non-supported browser
// has no effect when grid is supported and applied
display: inline-block;
}
article {
width: 100%;
@media (min-width: 728px) {
width: 25%;
}
}
@support (display: grid) {
// reset width when grid is supported
.wrapper > * {
width: auto;
}
}
Using Feature Queries in CSS
by Jen Simmons
https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
Grid by Example
by Rachel Andrew
https://gridbyexample.com/
@renettarenula
aysha.me
codepen.io/rrenula