Foundation block grid
Massive grid for sharing page content: for example, one line to display four images, no matter what the average width of the screen is required.
You can use the <ul> element plus .small|medium|large-block-grid- num grid- num class to create massive grid. num is the number used to specify the average:
Examples
<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>
<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>
try it"
Another example, use paragraph:
Examples
<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>
<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>
try it"
Display a different number of different sizes
By adding multiple grid blocks of different size classes can be set to display a different number of blocks:
Examples
<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>
<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>
try it"