CSS

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

October 9, 2017
FlexGrid

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

Manual

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

Basic

<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>

Media Queries

$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