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>