CSS

【CSS】CSSグリッドMS Grid

January 14, 2017
MS Grid

MS GridはSASSを介して設定可能な、CSSグリッド。

The Markup

// Standard grid layout

<div class="container">
    <div class="row">
        <div class="col_4">
            Content goes here...
        </div>
        <div class="col_4">
            Content goes here...
        </div>
        <div class="col_4">
            Content goes here...
        </div>
    </div>
</div>

// Full width container

<div class="container-full">
    <div class="row">
        <div class="col_4">
            Content goes here...
        </div>
        <div class="col_4">
            Content goes here...
        </div>
        <div class="col_4">
            Content goes here...
        </div>
    </div>
</div>

Helper Classes

  1. .col_hide
  2. .col_m_hide
  3. .col_s_hide
  4. .col_pad

Demo/Download