傳統佈局方法
網格系統是 CSS 佈局中非常常見的特性，在 CSS 網格佈局出現之前，它們通常使用浮動或其他佈局特性實現。你將你的佈局想象成一組固定數量的列（例如 4、6 或 12），然後將你的內容列放入這些虛構的列中。在本文中，我們將探討這些舊方法是如何工作的，以便你能理解如果你在較舊的專案中工作，它們是如何被使用的。
CSS 網格佈局之前的佈局和網格系統
對於任何來自設計背景的人來說，在最近之前 CSS 沒有內建的網格系統，我們似乎一直在使用各種次優的方法來建立類似網格的設計，這可能令人驚訝。我們現在稱這些為“遺留”方法。
對於新專案，在大多數情況下，CSS 網格佈局將與一種或多種其他現代佈局方法結合使用，作為任何佈局的基礎。但是，你偶爾會遇到使用這些遺留方法的“網格系統”。瞭解它們的工作原理以及它們與 CSS 網格佈局的不同之處是值得的。
本課將解釋基於浮動和 flexbox 的網格系統和網格框架是如何工作的。學習了網格佈局後，你可能會驚訝於這一切看起來多麼複雜！如果你需要為不支援較新方法的瀏覽器建立回退程式碼，以及讓你能夠處理使用這些型別系統的現有專案，這些知識將對你有幫助。
在我們探索這些系統時，值得記住的是，它們都沒有真正像 CSS 網格佈局那樣建立網格。它們透過給專案一個大小，並將它們推來推去，使它們排列成看起來像網格的方式工作。
兩列布局
讓我們從最簡單的例子開始——一個兩列布局。你可以透過在你的計算機上建立一個新的 index.html 檔案，用 簡單的 HTML 模板填充它，並將下面的程式碼插入到適當的地方來進行操作。在該部分的底部，你可以看到最終程式碼的樣子。
首先，我們需要一些內容放到我們的列中。用以下內容替換當前在 body 中的內容
<h1>2 column layout example</h1>
<div>
<h2>First column</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
eget fermentum sapien.
</p>
</div>
<div>
<h2>Second column</h2>
<p>
Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
每一列都需要一個外部元素來包含它的內容，讓我們可以一次性操作所有內容。在這個例子中，我們選擇了 <div>，但你可以選擇更具語義性的內容，比如 <article>、<section> 和 <aside>，或者其他任何東西。
現在是 CSS。首先，將以下內容應用於你的 HTML，以提供一些基本設定
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
body 的寬度將是視窗的 90%，直到它達到 900 畫素寬，在這種情況下，它將保持固定在這個寬度並自身居中在視窗中。預設情況下，它的子元素（h1 和兩個 <div>）將跨越 body 的 100% 寬度。如果我們想要兩個 <div> 彼此並排浮動，我們需要將它們的寬度設定為其父元素的 100% 或更小，這樣它們才能彼此並排放置。將以下內容新增到你的 CSS 的底部
div:nth-of-type(1) {
width: 48%;
}
div:nth-of-type(2) {
width: 48%;
}
在這裡，我們設定了兩個元素的寬度都是其父元素的 48%——這總共是 96%，留下 4% 可以作為兩列之間的間距，使內容有空間呼吸。現在我們只需要使列浮動，就像這樣
div:nth-of-type(1) {
width: 48%;
float: left;
}
div:nth-of-type(2) {
width: 48%;
float: right;
}
將這些內容組合在一起應該會得到以下結果
你會注意到，我們在這裡對所有寬度都使用了百分比——這是一個很好的策略，因為它建立了一個流式佈局，一個可以適應不同螢幕大小並在較小螢幕大小下保持列寬比例相同的佈局。嘗試調整瀏覽器視窗的寬度，親自看看。這是響應式網頁設計的寶貴工具。
注意： 你可以在 0_two-column-layout.html 上檢視此示例的執行情況（也可以檢視 原始碼）。
建立簡單的傳統網格框架
大多數遺留框架使用 float 屬性的行為，將一列浮動到另一列的旁邊，以建立一個看起來像網格的東西。完成使用浮動建立網格的過程，可以讓你瞭解它是如何工作的，並介紹一些更高階的概念，在這些概念的基礎上，你可以學習關於 浮動和清除 的課程中的內容。
最容易建立的網格框架型別是固定寬度框架——我們只需要確定我們想要設計總共佔用的寬度、我們想要多少列以及列和間距的寬度。如果我們決定將設計放在一個網格上，其中列根據瀏覽器寬度增長和縮小，那麼我們需要計算列和它們之間間距的百分比寬度。
在接下來的幾節中，我們將探討如何建立這兩種方法。我們將建立一個 12 列網格——一個非常常見的選擇，它被認為非常適合不同的情況，因為 12 可以被 6、4、3 和 2 整除。
簡單的固定寬度網格
讓我們首先建立一個使用固定寬度列的網格系統。
首先，從我們的示例 simple-grid.html 檔案中建立一個本地副本，該檔案在其 body 中包含以下標記。
<div class="wrapper">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div class="col">10</div>
<div class="col">11</div>
<div class="col">12</div>
</div>
<div class="row">
<div class="col span1">13</div>
<div class="col span6">14</div>
<div class="col span3">15</div>
<div class="col span2">16</div>
</div>
</div>
我們的目標是將它變成一個演示網格，在 12 列網格上包含兩行——上面一行演示單個列的大小，下面一行演示網格上一些不同大小的區域。
在 <style> 元素中，新增以下程式碼，它將包裝器容器的寬度設定為 980 畫素，在右側填充 20 畫素。這給我們留下了 960 畫素用於我們的總列/間距寬度——在這種情況下，填充是從總內容寬度中減去的，因為我們已將 box-sizing 設定為所有元素的 border-box（有關更多說明，請參閱 替代 CSS 盒子模型）。
* {
box-sizing: border-box;
}
body {
width: 980px;
margin: 0 auto;
}
.wrapper {
padding-right: 20px;
}
現在，使用包裝在網格每一行周圍的行容器來清除一行與另一行的關係。在之前的規則下方新增以下規則
.row {
clear: both;
}
應用此清除意味著我們不需要用填充整個 12 列的元素來完全填充每一行。行將保持分離，並且不會相互干擾。
列之間的間距為 20 畫素寬。我們將這些間距作為每一列左側的邊距建立——包括第一列，以平衡容器右側的 20 畫素填充。因此，我們總共有 12 個間距——12 x 20 = 240。
我們需要從我們的總寬度 960 畫素中減去它，這樣我們的列就只剩下 720 畫素。如果我們現在將其除以 12，我們就知道每一列應該有 60 畫素寬。
我們的下一步是為 .col 類建立一個規則，使其向左浮動，並賦予它 margin-left 20 畫素，以形成間距，並賦予它 width 60 畫素。將以下規則新增到你的 CSS 的底部
.col {
float: left;
margin-left: 20px;
width: 60px;
background: rgb(255 150 150);
}
現在，上面一行單個列將整齊地排列成網格。
注意： 我們還給每一列賦予了一個淺紅色的顏色，以便你可以確切地看到每一個佔用了多少空間。
我們想要跨越多列的佈局容器需要被賦予特殊的類，以調整它們的 width 值，使其達到所需的列數（加上它們之間的間距）。我們需要建立一個額外的類來允許容器跨越 2 到 12 列。每個寬度都是將該數量的列的列寬度加上間距寬度相加得出的結果，而間距寬度總是比列數少一個。
將以下內容新增到你的 CSS 的底部
/* Two column widths (120px) plus one gutter width (20px) */
.col.span2 {
width: 140px;
}
/* Three column widths (180px) plus two gutter widths (40px) */
.col.span3 {
width: 220px;
}
/* And so on… */
.col.span4 {
width: 300px;
}
.col.span5 {
width: 380px;
}
.col.span6 {
width: 460px;
}
.col.span7 {
width: 540px;
}
.col.span8 {
width: 620px;
}
.col.span9 {
width: 700px;
}
.col.span10 {
width: 780px;
}
.col.span11 {
width: 860px;
}
.col.span12 {
width: 940px;
}
建立了這些類之後，我們現在就可以在網格上排列不同寬度的列了。嘗試儲存並載入頁面，看看效果。
嘗試修改元素上的類，甚至新增和刪除一些容器，看看你可以如何改變佈局。例如，你可以使第二行看起來像這樣
<div class="row">
<div class="col span8">13</div>
<div class="col span4">14</div>
</div>
現在你已經建立了一個網格系統，你可以定義每一行的行和列數，然後用你需要的內容填充每個容器。太棒了！
建立流體網格
我們的網格工作得很好，但是它有一個固定寬度。我們真正想要的是一個靈活的（流體）網格，它會隨著瀏覽器 視窗 中可用空間的變化而增長和縮小。為了實現這一點，我們可以將參考畫素寬度改為百分比。
將固定寬度轉換為靈活的基於百分比的寬度的公式如下。
target / context = result
對於我們的列寬度，我們的目標寬度是 60 畫素，而我們的上下文是 960 畫素的包裝器。我們可以使用以下公式來計算百分比。
60 / 960 = 0.0625
然後我們將小數點向右移動兩位，得到一個 6.25% 的百分比。因此，在我們的 CSS 中，我們可以用 6.25% 替換 60 畫素的列寬度。
我們需要對我們的間距寬度做同樣的事情
20 / 960 = 0.02083333333
因此，我們需要用 2.08333333% 替換我們的 .col 規則上的 20 畫素 margin-left 和 .wrapper 上的 20 畫素 padding-right。
更新我們的網格
要開始本節的操作，請從之前的示例頁面建立一個新副本，或者從我們的 simple-grid-finished.html 程式碼中建立一個本地副本，作為起點。
將第二個 CSS 規則（帶有 .wrapper 選擇器）更新如下
body {
width: 90%;
max-width: 980px;
margin: 0 auto;
}
.wrapper {
padding-right: 2.08333333%;
}
我們不僅賦予了它一個百分比 width，還添加了一個 max-width 屬性，以防止佈局變得太寬。
接下來，將第四個 CSS 規則（帶有 .col 選擇器）更新如下
.col {
float: left;
margin-left: 2.08333333%;
width: 6.25%;
background: rgb(255 150 150);
}
現在是比較繁瑣的部分——我們需要更新所有 .col.span 規則，使用百分比而不是畫素寬度。這需要使用計算器，花費一些時間；為了節省你的時間，我們已經幫你完成了以下操作。
用以下內容更新 CSS 規則的底部塊
/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
.col.span2 {
width: 14.58333333%;
}
/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
.col.span3 {
width: 22.91666666%;
}
/* And so on… */
.col.span4 {
width: 31.24999999%;
}
.col.span5 {
width: 39.58333332%;
}
.col.span6 {
width: 47.91666665%;
}
.col.span7 {
width: 56.24999998%;
}
.col.span8 {
width: 64.58333331%;
}
.col.span9 {
width: 72.91666664%;
}
.col.span10 {
width: 81.24999997%;
}
.col.span11 {
width: 89.5833333%;
}
.col.span12 {
width: 97.91666663%;
}
現在儲存你的程式碼，在瀏覽器中載入它，並嘗試更改視窗寬度——你應該會看到列寬度很好地調整以適應它。
使用 calc() 函式進行更簡單的計算
您可以使用 calc() 函式在 CSS 中直接進行數學運算——這允許您在 CSS 值中插入簡單的數學表示式，以計算某個值應該是什麼。它在需要進行復雜數學運算時特別有用，您甚至可以計算使用不同單位的運算，例如“我希望這個元素的高度始終是其父元素高度的 100%，減去 50 畫素”。請參閱 MediaStream Recording API 教程中的這個示例。
無論如何，讓我們回到我們的網格！任何跨越我們網格中多個列的列，其總寬度都等於 6.25% 乘以跨越的列數，再加上 2.08333333% 乘以間距的數量（始終等於列數減 1）。calc() 函式允許我們在寬度值中直接進行此計算，因此對於任何跨越 4 列的專案，我們可以執行以下操作，例如
.col.span4 {
width: calc((6.25% * 4) + (2.08333333% * 3));
}
嘗試用以下內容替換您的底部規則塊，然後在瀏覽器中重新載入它，看看您是否得到相同的結果
.col.span2 {
width: calc((6.25% * 2) + 2.08333333%);
}
.col.span3 {
width: calc((6.25% * 3) + (2.08333333% * 2));
}
.col.span4 {
width: calc((6.25% * 4) + (2.08333333% * 3));
}
.col.span5 {
width: calc((6.25% * 5) + (2.08333333% * 4));
}
.col.span6 {
width: calc((6.25% * 6) + (2.08333333% * 5));
}
.col.span7 {
width: calc((6.25% * 7) + (2.08333333% * 6));
}
.col.span8 {
width: calc((6.25% * 8) + (2.08333333% * 7));
}
.col.span9 {
width: calc((6.25% * 9) + (2.08333333% * 8));
}
.col.span10 {
width: calc((6.25% * 10) + (2.08333333% * 9));
}
.col.span11 {
width: calc((6.25% * 11) + (2.08333333% * 10));
}
.col.span12 {
width: calc((6.25% * 12) + (2.08333333% * 11));
}
注意：您可以在 fluid-grid-calc.html 中檢視我們的完成版本（也可以 檢視即時版本）。
語義與“非語義”網格系統
在您的標記中新增類來定義佈局意味著您的內容和標記將與您的視覺呈現繫結在一起。您有時會聽到這種 CSS 類的使用被描述為“非語義”——描述內容的外觀——而不是描述內容的語義類使用。這就是我們的 span2、span3 等類的案例。
這不是唯一的方法。您可以改為決定您的網格，然後將大小資訊新增到現有語義類的規則中。例如，如果您有一個帶有 content 類別的 <div>，並且您希望它跨越 8 列，您可以從 span8 類中複製寬度，得到如下規則
.content {
width: calc((6.25% * 8) + (2.08333333% * 7));
}
注意：如果您要使用諸如 Sass 這樣的預處理器，您可以建立一個簡單的 mixin 為您插入該值。
在我們的網格中啟用偏移容器
我們建立的網格工作良好，只要我們希望所有容器都與網格的左側對齊即可。如果我們希望在第一個容器之前（或容器之間）留出一個空列空間，我們需要建立一個偏移類，為我們的站點新增左邊距，以便在視覺上將其推到網格中。更多數學運算！
讓我們試試看。
從您之前的程式碼開始，或使用我們的 fluid-grid.html 檔案作為起點。
讓我們在 CSS 中建立一個類，該類將容器元素偏移一個列寬。將以下內容新增到您的 CSS 底部
.offset-by-one {
margin-left: calc(6.25% + (2.08333333% * 2));
}
或者，如果您更喜歡自己計算百分比，請使用以下內容
.offset-by-one {
margin-left: 10.41666666%;
}
您現在可以將此類新增到您希望在其左側留出一個列寬空隙的任何容器中。例如，如果您在 HTML 中有以下內容
<div class="col span6">14</div>
嘗試用以下內容替換它
<div class="col span5 offset-by-one">14</div>
注意：請注意，您需要減少跨越的列數，以騰出空間用於偏移！
嘗試載入並重新整理以檢視差異，或檢視我們的 fluid-grid-offset.html 示例（也可以 檢視即時執行）。完成的示例應該如下所示
注意：作為一項額外的練習，您可以實現 offset-by-two 類嗎？
浮動網格限制
當使用這樣的系統時，您確實需要確保您的總寬度正確相加，並且您不會在行中包含跨越超出該行可容納的列數的元素。由於浮動的工作方式，如果網格列數變得太寬，末端的元素將向下移到下一行，從而破壞網格。
還要記住，如果元素的內容比它們所佔據的行寬，它將溢位並看起來很糟糕。
這個系統最大的限制是它本質上是一維的。我們正在處理列，以及跨越元素跨列，但不是跨行。使用這些舊的佈局方法，很難控制元素的高度而不顯式設定高度，這是一種非常不靈活的方法——它只有在您可以保證您的內容具有特定高度的情況下才有效。
彈性盒網格？
如果您閱讀了我們之前關於 flexbox 的文章，您可能會認為 flexbox 是建立網格系統的理想解決方案。有許多基於 flexbox 的網格系統可用，並且 flexbox 可以解決我們在上面建立網格時已經發現的許多問題。
但是，flexbox 從未被設計為網格系統，並且在用作網格系統時會帶來新的挑戰。作為這個的簡單示例，我們可以使用與上面相同的示例標記，並使用以下 CSS 來設定 wrapper、row 和 col 類的樣式
body {
width: 90%;
max-width: 980px;
margin: 0 auto;
}
.wrapper {
padding-right: 2.08333333%;
}
.row {
display: flex;
}
.col {
margin-left: 2.08333333%;
margin-bottom: 1em;
width: 6.25%;
flex: 1 1 auto;
background: rgb(255 150 150);
}
您可以嘗試在您自己的示例中進行這些替換，或者檢視我們的 flexbox-grid.html 示例程式碼（也可以 檢視即時執行）。
在這裡，我們將每行都變成了一個 flex 容器。在基於 flexbox 的網格中，我們仍然需要行，以便允許我們擁有總和不到 100% 的元素。我們將該容器設定為 display: flex。
在 .col 上，我們將 flex 屬性的第一個值 (flex-grow) 設定為 1，以便我們的專案可以增長，第二個值 (flex-shrink) 設定為 1，以便專案可以縮小，第三個值 (flex-basis) 設定為 auto。由於我們的元素設定了 width，auto 將使用該寬度作為 flex-basis 值。
在頂行，我們在網格上獲得了十二個整齊的框，並且當我們更改視口寬度時，它們會等比例地增長和縮小。然而，在下一行，我們只有四個專案，這些專案也從 60px 的基點增長和縮小。由於只有四個專案，它們可以比上面行中的專案增長得多，結果是它們在第二行上都佔據相同的寬度。
要解決這個問題，我們仍然需要包含我們的 span 類，以提供一個寬度來替換 flex-basis 用於該元素的值。
它們也不尊重上面專案使用的網格，因為它們不知道任何有關它的事情。
Flexbox 本質上是一維的。它處理單個維度，即行或列。我們無法為列和行建立嚴格的網格，這意味著如果我們要將 flexbox 用於我們的網格，我們仍然需要像浮動佈局一樣計算百分比。
在您的專案中，您可能仍然選擇使用 flexbox “網格”，因為與浮動相比，flexbox 提供了額外的對齊和空間分配功能。但是，您應該意識到，您仍然在使用一種工具來做它不是為其設計的事情。因此，您可能會覺得它讓您為了獲得想要的結果而跳過額外的步驟。
第三方網格系統
現在我們已經瞭解了網格計算背後的數學原理，我們已經可以很好地檢視一些常用的第三方網格系統。如果您在網上搜索“CSS 網格框架”，您會發現一大堆可供選擇的選項。流行的框架，如 Bootstrap 和 Foundation 包含網格系統。也有一些獨立的網格系統，它們要麼使用 CSS 開發，要麼使用預處理器開發。
讓我們看一下其中一個獨立的系統，因為它展示了使用網格框架的常見技術。我們將使用的網格是 Skeleton 的一部分，Skeleton 是一個簡單的 CSS 框架。
要開始，請訪問 Skeleton 網站，然後選擇“下載”以下載 ZIP 檔案。解壓縮此檔案並將 skeleton.css 和 normalize.css 檔案複製到一個新目錄中。
複製我們的 html-skeleton.html 檔案，並將其儲存在與 skeleton 和 normalize CSS 相同的目錄中。
在 HTML 頁面中包含 skeleton 和 normalize CSS，方法是在其頭部新增以下內容
<link href="normalize.css" rel="stylesheet" />
<link href="skeleton.css" rel="stylesheet" />
Skeleton 包含的不僅僅是一個網格系統——它還包含用於排版和其他頁面元素的 CSS，您可以將其用作起點。但是，現在我們將保留這些預設設定——我們真正感興趣的是網格。
注意：Normalize 是 Nicolas Gallagher 編寫的非常有用的 CSS 庫，它會自動執行一些有用的基本佈局修復，並使預設元素樣式在不同瀏覽器之間更加一致。
我們將使用與我們之前的示例類似的 HTML。將以下內容新增到您的 HTML 主體中
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div class="col">10</div>
<div class="col">11</div>
<div class="col">12</div>
</div>
<div class="row">
<div class="col">13</div>
<div class="col">14</div>
<div class="col">15</div>
<div class="col">16</div>
</div>
</div>
要開始使用 Skeleton，我們需要給包裝器 <div> 一個名為 container 的類——這已經包含在我們的 HTML 中。這將以 960 畫素的最大寬度居中內容。您可以看到框現在永遠不會超過 960 畫素。
您可以檢視 skeleton.css 檔案，以檢視應用此類時使用的 CSS。<div> 使用 auto 左邊距和右邊距居中，並在左右兩側應用 20 畫素的填充。Skeleton 還像我們之前一樣將 box-sizing 屬性設定為 border-box，因此此元素的填充和邊框將包含在總寬度中。
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
元素只能在它們位於行內時才能成為網格的一部分，因此與我們之前的示例一樣，我們需要一個額外的 <div> 或其他具有 row 類的元素，巢狀在內容 <div> 元素和容器 <div> 之間。我們也已經這樣做了。
現在讓我們來佈局容器框。Skeleton 基於 12 列網格。頂行框都需要 one column 類，以使它們跨越一列。
現在新增這些，如以下程式碼片段所示
<div class="container">
<div class="row">
<div class="one column">1</div>
<div class="one column">2</div>
<div class="one column">3</div>
/* and so on */
</div>
</div>
接下來，為第二行上的容器新增類，解釋它們應該跨越的列數，如下所示
<div class="row">
<div class="one column">13</div>
<div class="six columns">14</div>
<div class="three columns">15</div>
<div class="two columns">16</div>
</div>
嘗試儲存您的 HTML 檔案並在瀏覽器中載入它，以檢視效果。
注意：如果您遇到此示例無法正常執行的問題，請嘗試擴大您用來檢視它的視窗（如果視窗太窄，網格將不會如這裡描述的那樣顯示）。如果這不起作用，請嘗試將其與我們的 html-skeleton-finished.html 檔案進行比較（也請檢視 即時執行）。
如果您檢視 skeleton.css 檔案，您可以看到它是如何工作的。例如，Skeleton 定義了以下內容來為添加了“三列”類的元素設定樣式。
.three.columns {
width: 22%;
}
所有 Skeleton（或任何其他網格框架）所做的只是設定預定義的類，您可以透過將它們新增到您的標記中來使用它們。這與您自己計算這些百分比完全相同。
如您所見，使用 Skeleton 時，我們只需要編寫很少的 CSS 程式碼。當我們在標記中新增類時，它會處理所有浮動操作。正是這種將佈局責任交給其他東西的能力，使使用網格系統框架成為一個令人信服的選擇！然而，如今，隨著 CSS 網格佈局的出現，許多開發人員正在放棄這些框架，轉而使用 CSS 提供的內建原生網格。