例
<ul class="small-block-grid-3">
<li><img src="newyork.jpg"
alt="New York"></li>
<li><img src="paris.jpg" alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San Francisco"></li>
</ul>
結果：
ブロックグリッドは、均等にコンテンツを分割するために使用されます：例えば、4 つの画像やその他のコンテンツの行を 持っている場合、たとえ画面サイズが異なっても、均等にスペースを配置したままでいる必要がある場合は、 これを使用しています。
<ul> 要素を使用し、ブロックグリッドを作成するために、
.small|medium|large-block-grid-num クラスを追加します。
num は、均等に分割すべき項目数を指定します：
<ul class="small-block-grid-3">
<li><img src="newyork.jpg"
alt="New York"></li>
<li><img src="paris.jpg" alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San Francisco"></li>
</ul>
結果：
 |
効果を確認するには、ブラウザウィンドウのサイズを変更してください。画像は常に均等に分割されます。 |
|---|
パラグラフを使用するもう一つの例：
<ul class="small-block-grid-3">
<li><p>Just a Simple Example
Text...</p></li>
<li><p>Just a Simple Example Text...</p></li>
<li><p>Just a Simple Example Text...</p></li>
</ul>
結果：
Just a Simple Example Text. Just a Simple Example Text. Just a Simple Example Text.
Just a Simple Example Text. Just a Simple Example Text. Just a Simple Example Text.
Just a Simple Example Text. Just a Simple Example Text. Just a Simple Example Text.
複数のグリッドブロック・クラスを追加することによって、異なる画面サイズの行に、 異なる項目数を指定します：
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li><img src="newyork.jpg" alt="New York"></li>
<li><img src="paris.jpg"
alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San
Francisco"></li>
<li><img src="newyork.jpg" alt="New York"></li>
</ul>
結果：
|
効果を確認するために、ブラウザウィンドウのサイズを変更します：大型デバイスの場合：常に 4 つの画像が並んで表示されます。 中型デバイスの場合：常に 3 つの画像が並んで表示されます。小型デバイスの場合：常に 2 つの画像が並んで表示されます。 |
|---|