CSS
【CSS】フレックスボックスに基づく最小限のグリッドInno Grid
March 12, 2017

Inno Gridはフレックスボックスに基づく最小限のグリッド。
<link rel="stylesheet" href="grid.css"> <link rel="stylesheet" href="main.css">
<div class="o-wrap"> <div class="o-head"> <h1>Inno Grid</h1> </div> <div class="o-grid"> <div class="o-grid__col o-grid__col--1-of-4"> <div class="c-item">1/4</div> </div> <div class="o-grid__col o-grid__col--2-of-4"> <div class="c-item">2/3</div> </div> <div class="o-grid__col"> <div class="c-item">Flex</div> </div> <div class="o-grid__col o-grid__col--1-of-3"> <div class="c-item">1/3</div> </div> <div class="o-grid__col"> <div class="c-item">Flex</div> </div> <div class="o-grid__col"> <div class="c-item">Flex</div> </div> <div class="o-grid__col"> <div class="c-item">Flex</div> </div> <div class="o-grid__col o-grid__col--1-of-2"> <div class="c-item">1/2</div> </div> <div class="o-grid__col o-grid__col--1-of-2"> <div class="c-item">1/2</div> </div> <div class="o-grid__col o-grid__col--1-of-1"> <div class="c-item">1/1</div> </div> </div> <div class="o-grid o-grid--no-gutter"> <div class="o-grid__col o-grid__col--1-of-4"> <div class="c-item">1/4</div> </div> <div class="o-grid__col o-grid__col--1-of-3"> <div class="c-item">1/3</div> </div> <div class="o-grid__col"> <div class="c-item">Flex</div> </div> </div> </div>