October 9, 2017

FlexGridはレスポンシブでモバイルファーストなFlexbox Grid。

ダウンロードしたCSSをheadセクションに含めます。

<div class="container">
    <div class="row">
        <div class="M1">...</div> * 12
        <div class="M8">...</div><div class="M4">...</div>
        <div class="M6">...</div><div class="M6">...</div>
        <div class="M4">...</div> * 3
    </div>
</div>

$break--S:  480px;
$break--M:  768px;
$break--L:  1024px;
$break--XL: 1440px;

<div class="container">
    <div class="row">
        <div class="M6">
            <div class="foo">...</div>
        </div>
    </div>
</div>

MIT