snipt

Ctrl+h for KB shortcuts

HTML

Foundation 4 - Block Grids

<!-- Using only the small-block-grid -->
<ul class="small-block-grid-2">
  <li><img src="../img/demos/demo1.png"></li>
  <li><img src="../img/demos/demo2.png"></li>
  <li><img src="../img/demos/demo3.png"></li>
  <li><img src="../img/demos/demo4.png"></li>
</ul>

<!-- Using only the large-block-grid -->
<ul class="large-block-grid-4">
  <li><img src="../img/demos/demo1.png"></li>
  <li><img src="../img/demos/demo2.png"></li>
  <li><img src="../img/demos/demo3.png"></li>
  <li><img src="../img/demos/demo4.png"></li>
</ul>

<!-- Using both block grids together for different layouts -->
<ul class="small-block-grid-2 large-block-grid-4">
  <li><img src="../img/demos/demo1.png"></li>
  <li><img src="../img/demos/demo2.png"></li>
  <li><img src="../img/demos/demo3.png"></li>
  <li><img src="../img/demos/demo4.png"></li>
</ul>

Description

Block grids are made from a ul.small-block-grid-# or ul.large-block-grid-#. These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly.

These have a bit of flexibility since you have access to two separate grids between our built in 768px breakpoint. If you use the small-block-grid only, the grid will keep its spacing and configuration no matter the screen size. If you use large-block-grid only, the list items will stack on top of each other for small devices. If you use both of those classes combined, you can control the configuration and layout separately for each breakpoint.
https://snipt.net/embed/808b4b7bea30464e42919c6687774761/
/raw/808b4b7bea30464e42919c6687774761/
808b4b7bea30464e42919c6687774761
html
HTML
23
2019-07-23T16:53:34
True
False
False
Jul 01, 2013 at 03:35 PM
/api/public/snipt/66183/
foundation-4-block-grids-1
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="c">&lt;!-- Using only the small-block-grid --&gt;</span> </span><span id="L-2"><a name="L-2"></a><span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;small-block-grid-2&quot;</span><span class="p">&gt;</span> </span><span id="L-3"><a name="L-3"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../img/demos/demo1.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span><span id="L-4"><a name="L-4"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../img/demos/demo2.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span><span id="L-5"><a name="L-5"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../img/demos/demo3.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span><span id="L-6"><a name="L-6"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../img/demos/demo4.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span><span id="L-7"><a name="L-7"></a><span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span><span id="L-8"><a name="L-8"></a> </span><span id="L-9"><a name="L-9"></a><span class="c">&lt;!-- Using only the large-block-grid --&gt;</span> </span><span id="L-10"><a name="L-10"></a><span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;large-block-grid-4&quot;</span><span class="p">&gt;</span> </span><span id="L-11"><a name="L-11"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../img/demos/demo1.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span><span id="L-12"><a name="L-12"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../img/demos/demo2.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span><span id="L-13"><a name="L-13"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../img/demos/demo3.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span><span id="L-14"><a name="L-14"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../img/demos/demo4.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span><span id="L-15"><a name="L-15"></a><span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span><span id="L-16"><a name="L-16"></a> </span><span id="L-17"><a name="L-17"></a><span class="c">&lt;!-- Using both block grids together for different layouts --&gt;</span> </span><span id="L-18"><a name="L-18"></a><span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;small-block-grid-2 large-block-grid-4&quot;</span><span class="p">&gt;</span> </span><span id="L-19"><a name="L-19"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../img/demos/demo1.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span><span id="L-20"><a name="L-20"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../img/demos/demo2.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span><span id="L-21"><a name="L-21"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../img/demos/demo3.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span><span id="L-22"><a name="L-22"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;../img/demos/demo4.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span><span id="L-23"><a name="L-23"></a><span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></pre></div> </td></tr></table>
foundation, grid