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

Thank You!