免費(fèi)AI編程助手
Foundation 網(wǎng)格實(shí)例
以下我們收集了一些網(wǎng)格常用的實(shí)例。
三個(gè)均等列
該實(shí)例演示了如何創(chuàng)建三個(gè)均等列(33.3%/33.3%/33.3%) ，在中型和大型設(shè)備上顯示三個(gè)列，在小型設(shè)備上自動(dòng)堆疊：
實(shí)例
<div class="medium-4 columns" style="background-color:yellow;">
<p>.medium-4</p>
</div>
<div class="medium-4 columns" style="background-color:pink;">
<p>.medium-4</p>
</div>
<div class="medium-4 columns" style="background-color:yellow;">
<p>.medium-4</p>
</div>
</div>
嘗試一下 ?
三個(gè)不均等列
該實(shí)例演示了如何創(chuàng)建三個(gè)不均等列 (25%/50%/25%)，在中型和大型設(shè)備上顯示三個(gè)列，在小型設(shè)備上自動(dòng)堆疊：
實(shí)例
<div class="medium-3 columns" style="background-color:yellow;">
<p>.medium-3</p>
</div>
<div class="medium-6 columns" style="background-color:pink;">
<p>.medium-6</p>
</div>
<div class="medium-3 columns" style="background-color:yellow;">
<p>.medium-3</p>
</div>
</div>
嘗試一下 ?
兩個(gè)均等列
該實(shí)例演示了如何創(chuàng)建兩個(gè)均等列 (50%/50%)，在小型、中型和大型設(shè)備上列的比例始終為 50%/50%：
實(shí)例
<div class="small-6columns" style="background-color:yellow;" >
<p>.small-6</p>
</div>
<div class="small-6columns" style="background-color:pink;" >
<p>.small-6</p>
</div>
</div>
嘗試一下 ?
兩個(gè)不均等列
該實(shí)例演示了如何創(chuàng)建兩個(gè)不均等列 (33.3%/66.6%)，在小型、中型和大型設(shè)備上列的比例始終為 33.3%/66.6%：
實(shí)例
<div class="small-8columns" style="background-color:yellow;" >
<p>.small-8</p>
</div>
<div class="small-4columns" style="background-color:pink;" >
<p>.small-4</p>
</div>
</div>
嘗試一下 ?
修改列的順序
通過(guò)使用 .small|medium|large-push-* 和 .small|medium|large-pull-* 類(lèi)來(lái)修改列的順序:
實(shí)例
<div class="small-4 small-8-push columns" style="background-color:yellow;" >
<p>.small-4 .small-8-push</p>
</div>
<div class="small-8 small-4-pull columns" style="background-color:pink;" >
<p>.small-8 .small-4-pull</p>
</div>
</div>
嘗試一下 ?
嵌套列
你可以使用嵌套網(wǎng)格(列中插入列):
實(shí)例
<div class="small-8 columns">.small-8
<div class="row">
<div class="small-8 columns">.small-8 Nested
<div class="row">
<div class="small-8 columns">.small-8 Nested Again </div>
<div class="small-4 columns">.small-4< /div>
</div>
</div>
<div class="small-4 columns">.small-4< /div>
</div>
</div>
<div class="small-4 columns">.small-4</div >
</div>
嘗試一下 ?
混合：手機(jī)、桌面設(shè)備
Foundation 網(wǎng)格系統(tǒng)有三個(gè)列: .small-* (手機(jī)), .medium-* (平板), 和 .large-* (桌面設(shè)備)。這些類(lèi)可以動(dòng)態(tài)組合使用，讓布局更加靈活：
提示： 每個(gè)類(lèi)都能放大，如果你希望小型和大型屏幕設(shè)備的寬度一樣可以設(shè)置指定 .small-*。
實(shí)例
<div class="small-6 large-8 columns">.small-6 .large-8< /div>
<div class="small-6 large-4 columns">.small-6 .large-4< /div>
</div>
<div class="row">
<div class="small-2 large-4 columns">.small-2 .large-2< /div>
<div class="small-4 large-4 columns">.small-4 .large-2< /div>
<div class="small-6 large-4 columns">.small-6 .large-2</div >
</div>
<div class="row">
<div class="small-3 large-5 columns">.small-3 .large-5< /div>
<div class="small-9 large-7 columns">.small-9 .large-7< /div>
</div>
嘗試一下 ?
混合：手機(jī)、平板和桌面設(shè)備
實(shí)例
<div class="medium-6 large-8 columns">.medium-6 .large-8</div >
<div class="medium-6 large-4 columns">.medium-6 .large-4</div >
</div>
<div class="row">
<div class="small-4 medium-3 large-7 columns">.small-4 .medium-3 .large-7< /div>
<div class="small-4 medium-6 large-3 columns">.small-4 .medium-6 .large-3< /div>
<div class="small-4 medium-3 large-2 columns">.small-4 .medium-3 .large-2< /div>
</div>
嘗試一下 ?
居中列
列居中可以使用 .small-centered 類(lèi)。中型和大型設(shè)備可以繼承小型設(shè)備的居中，但你需要在大型設(shè)備上設(shè)置居中類(lèi).large-centered 。
實(shí)例
<div class="small-4 small-centered columns">small-4 small-centered< /div>
</div>
<div class="row">
<div class="small-6 small-centered columns">small-6 small-centered< /div>
</div>
<div class="row">
<div class="small-6 large-centered columns">small-6 large-centered< /div>
</div>
<div class="row">
<div class="small-8 small-centered large-uncentered columns">small-8 small-centered large-uncentered </div>
</div>
<div class="row">
<div class="small-10 small-centered columns">small-10 small-centered< /div>
</div>
嘗試一下 ?
列偏移量
可以使用 .large-offset-* (或 .small-offset-*) 類(lèi)設(shè)置列向右移。 左側(cè)外邊距的列數(shù)量使用 * 號(hào)控制:
實(shí)例
<div class="large-1 columns">1</div >
<div class="large-11 columns">11</div >
</div>
<div class="row">
<div class="large-1 columns">1</div >
<div class="large-10 large-offset-1 columns">10, offset 1</div >
</div>
<div class="row">
<div class="large-1 columns">1</div >
<div class="large-9 large-offset-2 columns">9, offset 2</div >
</div>
<div class="row">
<div class="large-1 columns">1</div >
<div class="large-8 large-offset-3 columns">8, offset 3</div >
</div>
嘗試一下 ?
不完整列
如果一行中的列數(shù)量之和不是 12 , Foundation 將自動(dòng)將最后一列向右浮動(dòng)，并使用空白來(lái)填充剩下的列。
可選項(xiàng) .end 類(lèi)用于設(shè)置最后一列的元素向左邊浮動(dòng):
實(shí)例
<div class="medium-3 columns">.medium-3</div >
<div class="medium-3 columns">.medium-3</div >
<div class="medium-3 columns">.medium-3</div >
</div>
<div class="row">
<div class="medium-3 columns">.medium-3</div >
<div class="medium-3 columns">.medium-3</div >
<div class="medium-3 columns end">.medium-3 .end</div >
</div>
寬屏
網(wǎng)格 (.row) 最大尺寸（ max-width）為 62.5rem。在寬屏設(shè)備上尺寸可能大于 62.5rem, 這樣列就無(wú)法完整填充頁(yè)面，即便寬度設(shè)置為 100%。但是我們可以通過(guò) CSS 來(lái)設(shè)置新的 max-width:
如果你想使用默認(rèn)的 max-width, 但是背景顏色需要跨域整個(gè)頁(yè)面，這時(shí)你在容器元素上使用 .row 類(lèi)，并指定你需要的背景顏色:
實(shí)例
<div class="row">
<div class="small-6 columns" style="background-color:yellow;" >.small-6</div>
<div class="small-6 columns" style="background-color:pink;" >.small-6</div>
</div>
</div>
嘗試一下 ?
更多建議：