【CSS】シンプルなレスポンシブ・軽量のCSSグリッドPills

Pillsはシンプルなレスポンシブ・4キロバイトと軽量のCSSグリッド。IE8+, Firefox, Chrome, Safari, Operaで動作するようです。

pills_1

Stylesheet

headセクションにスタイルシートを追加します。

<link rel="stylesheet" href="bower_components/pills/dist/pills.min.css">

Viewport

headセクションにメタタグを追加します。

<meta name="viewport" content="width=device-width,initial-scale=1">

Usage

1. First

row classにcolumnsを入れます。twelve columns12列のグリッドを使用

<div class="row">
<div class="twelve columns">
</div>
</div>

列をミックス

<div class="row">
<div class="four columns">
</div>
<div class="eight columns">
</div>
</div>

row classをcolumnsの中に入れることもできます。

<div class="row">
<div class="four columns">
</div>
<div class="eight columns">
<div class="row">
<div class="six columns">
</div>
<div class="six columns">
</div>
</div>
</div>
</div>

列を相殺することもできます。

<div class="row">
<div class="eight columns offset by-four">
</div>

2. Second

wholeでも構築できます。

<div class="row">
<div class="column whole">
</div>
</div>

半分

<div class="row">
<div class="column half">
</div>
<div class="column half">
</div>
</div>

上記のように入れ子にすることができます。

<div class="row">
<div class="column one-fourth">
</div>
<div class="column three-fourths">
<div class="row">
<div class="column two-fifths">
</div>
<div class="column three-fifths">
</div>
</div>
</div>
</div>

列の相殺もできます。

<div class="row">
<div class="column two-thirds offset by-one-third">
</div>

MITライセンス

 
Pills

【CSS】シンプルなレスポンシブ・軽量のCSSグリッドPills

  • LATEST
  • RELATED
  • POPULAR