Foundation 塊狀網格
塊狀網格用於均分頁面內容：例如一行內要顯示四張圖片，不管什麼屏幕下都需要均分寬度。
可以使用<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 >
< 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 >
< 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 >
嘗試一下»
不同尺寸屏幕顯示不同數量
通過添加多個網格塊類可以設置不同尺寸屏幕顯示不同的塊數量:
實例
< 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 >
嘗試一下»