CSS

【CSS】flexboxを使用したCSSグリッドFlexbox Grid System

February 18, 2017
flexbox grid

Flexbox Grid Systemはflexboxを使用したCSSグリッド

Equal Ratio Grid

rowcolumnクラスで動作します。

<div class="row row-sm">
        <div class="column">1</div>
      </div>
      <div class="row row-sm">
        <div class="column">1/2</div>
        <div class="column">1/2</div>
      </div>
      <div class="row row-sm">
        <div class="column">1/3</div>
        <div class="column">1/3</div>
        <div class="column">1/3</div>
      </div>
      <div class="row row-sm">
        <div class="column">1/4</div>
        <div class="column">1/4</div>
        <div class="column">1/4</div>
        <div class="column">1/4</div>
      </div>