閱讀(2.7k) 書簽贊(0) 我要糾錯

W3.CSS Grid(網(wǎng)格)

2020-12-02 10:04 更新

這個部分將在一個小屏幕上占據(jù)12個柱子，在一個中屏幕上占據(jù)4個柱子，在一個大屏幕上占據(jù)3個柱子。

這部分將在一個小屏幕上占據(jù)12列，在一個中等屏幕上占8列，在一個大屏幕上占9列。

實例

<p>這個部分將在一個小屏幕上占據(jù) 12 個柱子，在一個中屏幕上占據(jù) 4 個柱子，在一個大屏幕上占據(jù) 3 個柱子.</p>

</div>

<p>這部分將在一個小屏幕上占據(jù) 12 列，在一個中等屏幕上占 8 列，在一個大屏幕上占 9 列.</p>

</div>

嘗試一下 ?

響應(yīng)行

W3.CSS 的網(wǎng)格系統(tǒng)具有響應(yīng)能力。這些列將根據(jù)屏幕尺寸自動重新排列：在大屏幕上，按三列組織內(nèi)容可能看起來更好，但是在小屏幕上，如果將內(nèi)容堆疊在一起，可能會更好。

類	描述
w3-row	響應(yīng)類的容器，無填充
w3-row-padding	響應(yīng)類的容器，左右填充為 8px
w3-col	在 12 列響應(yīng)式網(wǎng)格中定義一列

w3-col具有以下子類：

小屏幕列（典型的智能手機）：

類	描述
s1	為小屏幕定義 12 列中的 1 列（寬度：08.33％）
s2	為小屏幕定義 12 列中的 2 列（寬度：16.66％）
s3	為小屏幕定義 12 列中的 3 列（寬度：25.00％）
s4	為小屏幕定義 12 列中的 4 列（寬度：33.33％）
s5-s11
s12	定義 12 列中的 12 列（寬度：100％）。小屏幕的默認設(shè)置

中型篩網(wǎng)（典型平板電腦）的列：

類	描述
m1	為中屏幕定義 12 列中的 1 列（寬度：08.33％）
m2	為中屏幕定義 12 列中的 2 列（寬度：16.66％）
m3	為中屏幕定義 12 列中的 3 列（寬度：25.00％）
m4	為中屏幕定義 12 列中的 4 列（寬度：33.33％）
m5 - m11
m12	定義 12 列中的 12 列（寬度：100％）。中屏幕的默認設(shè)置

大屏幕列（典型的筆記本電腦和臺式機）：

類	描述
l1	為大屏幕定義 12 列中的 1 列（寬度：08.33％）
l2	為大屏幕定義 12 列中的 2 列（寬度：16.66％）
l3	為大屏幕定義 12 列中的 3 列（寬度：25.00％）
l4	為大屏幕定義 12 列中的 4 列（寬度：33.33％）
l5 - l11
l12	定義 12 列中的 12 列（寬度：100％）。大屏幕的默認設(shè)置

上面的類可以組合起來以創(chuàng)建更多動態(tài)和靈活的布局。

每個類別都會按比例增加，因此，如果您希望為小，中和大屏幕設(shè)置相同的寬度，則只需指定小類別。而且，如果您希望在中型和大型屏幕上使用相同的寬度，則只需指定中級類。

但是，如果僅使用中級和/或大型類，則在小屏幕上，寬度將始終轉(zhuǎn)換為 100％。

注意：每行的列數(shù)總和應(yīng)為 12（6 + 6、3 + 3 + 6、9 + 3等）！

兩列相等

所有屏幕尺寸上的兩個等寬列（50％/ 50％）：

50%

實例

</div>

</div>

嘗試一下 ?

兩列不相等

在所有屏幕尺寸上，兩列寬度不相等（25％/ 75％）：

25%

75%

實例

</div>

</div>

嘗試一下 ?

三列相等

所有屏幕尺寸上的三個等寬列（33.3％/ 33.3％/ 33.3％）：

33.3%

實例

</div>

</div>

</div>

嘗試一下 ?

三列不相等

平板電腦，筆記本電腦和臺式機上的三個不同寬度的列（25％/ 50％/ 25％）。在手機上，這些列將自動堆疊（寬度為 100％）：

25%

50%

25%

實例

</div>

</div>

</div>

嘗試一下 ?

注意：此示例與使用 w3-quarter（m3），w3-half（m6），w3-quarter（m3）相同，您在 W3.CSS響應(yīng)式一章中了解到。

六欄

平板電腦，筆記本電腦和臺式機上有六個等寬的列（每個占 16％）。在手機上，這些列將自動堆疊（寬度為 100％）：

16%

實例

</div>

</div>

</div>

</div>

</div>

</div>

嘗試一下 ?

混合：手機和筆記本電腦

您可以結(jié)合使用類來創(chuàng)建動態(tài)靈活的布局。本示例將生成兩列布局，在大屏幕上拆分為 83.34％/ 16.66％（l10，l2），在小屏幕上拆分為 50％/ 50％（s6，s6）：

83.34%

16.66%

實例

</div>

嘗試一下 ?

混合：手機，平板電腦和筆記本電腦

此示例將產(chǎn)生一個三列布局，其中大屏幕拆分為 25％/ 58.34％/ 16.66％（l3，l7，l2），中型屏幕拆分為 50％/ 25％/ 25％（m6，m3，m3），在小屏幕上分割為 33.3％/ 33.3％/ 33.3％（s4，s4，s4）：

25%

58.34%

16.66%

實例

</div>

嘗試一下 ?

w3-row 和 w3-row-padding 之間的區(qū)別

w3-row 類定義了一個無填充的容器，而 w3-row-padding 類向每列添加了 8px 的左右填充：

w3-row：

實例

</div>

</div>

</div>

嘗試一下 ?

使用 w3-rest

w3-rest 類是會用什么剩下的網(wǎng)格列的一個強大而靈活的類。

20%

80%

90%

10%

20%

60%

20%

25%

10%

40%

25%

20%

30%

實例

</div>

嘗試一下 ?

使用 class =“ w3-rest”的元素必須始終是源代碼中的最后一個元素。

使用百分比

使用 CSS width 屬性確定列的特定寬度。

20%

60%

20%

45%

55%

15%

35%

10%

30%

10%

實例

</div>

嘗試一下 ?

以上內(nèi)容是否對您有幫助：

← W3.CSS Tooltips (工具提示)

W3.CSS Code（代碼） →

寫筆記

我要補充

W3.CSS Grid(網(wǎng)格)

實例

響應(yīng)行

小屏幕列（典型的智能手機）：

中型篩網(wǎng)（典型平板電腦）的列：

大屏幕列（典型的筆記本電腦和臺式機）：

兩列相等

實例

兩列不相等

實例

三列相等

實例

三列不相等

實例

六欄

實例

混合：手機和筆記本電腦

實例

混合：手機，平板電腦和筆記本電腦

實例

w3-row 和 w3-row-padding 之間的區(qū)別

實例

使用 w3-rest

實例

使用百分比

實例

推薦文章

推薦教程

推薦課程