Pure Grids 簡介
Pure Grids 容易使用且非常強大，請記住以下幾個簡單概念
- 格線類別與單位類別
- Pure Grids 包含兩種類別：格線類別 (
pure-g) 和單位類別 (pure-u或pure-u-*) - 單位的寬度是分數
- 單元有代表其寬度的各種類別名稱。例如，
pure-u-1-2的寬度為 50%，而pure-u-1-5的寬度則為 20%. - 格線的所有子元素都必須是單位
- 包含在具有
pure-g類別名稱的元素中的子元素必須為pure-u或pure-u-*類別名稱的格線單位。 - 內容置於格線單位中
- 對使用者可見的所有內容都必須包含在格線單位中。這可確保內容會正確地呈現。
讓我們從一個簡單範例開始。這是包含三欄的格線。
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>格線單位大小
Pure 附帶基於5 分之 1 和 24 分之 1 的格線。下方列出可附加到 pure-u-* 類別名稱的可用單位，其中 * 是下列單位分數之一。例如，寬度為 50% 的單位類別名稱為：pure-u-1-2.
基於 5 分之 1 的單位
基於 24 分之 1 的單位
自訂單位大小
我們正在打造工具讓使用者自訂 Pure Grids。第一個低階工具，Pure Grids Rework 外掛程式，現已可以用，我們使用這個工具來產生 Pure 的內建單位大小。
Pure 具有反應能力的格線
Pure 有行動裝置優先的具有反應能力的格線系統，可透過 CSS 類別名稱宣告式地使用。它是建置在預設格線上穩健且靈活的格線。
包含在網頁中
由於媒體查詢無法覆寫，我們不會將格線系統包含為 pure.css 的一部分。您必須將它拉進來作為一個獨立 CSS 檔案。您可以透過將以下 <link> 標籤加入您的網頁來執行此操作。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css" />Pure 的普通格線與具有反應能力的格線
了解 Pure 的普通格線和具有反應能力的格線之間差異的最佳方法是透過範例。下方的程式碼片段顯示普通 Pure Grids 是如何編寫的。這些格線沒有反應能力。它們會永遠是 width: 33.33%，與螢幕寬度無關。
<div class="pure-g">
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
</div>接下來，讓我們看看具有反應能力的格線。這個格線中的元素在小螢幕上會是 width: 100%，但在中型及大螢幕上會縮小為 width: 33.33%.
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>預設媒體查詢
使用具有反應能力的格線時，您可以透過加入類別名稱來控制格線在特定中斷點上的行為。Pure 預設具有反應能力的格線隨附下列類別名稱和媒體查詢中斷點。
| 金鑰 | CSS 媒體查詢 | 套用 | 類別名稱 |
|---|---|---|---|
| 無 | 無 | 總是 | .pure-u-* |
sm | @media screen and (min-width: 35.5em) | ≥ 568px | .pure-u-sm-* |
md | @media screen and (min-width: 48em) | ≥ 768px | .pure-u-md-* |
lg | @media screen and (min-width: 64em) | ≥ 1024px | .pure-u-lg-* |
xl | @media screen and (min-width: 80em) | ≥ 1280px | .pure-u-xl-* |
xxl | @media screen and (min-width: 120em) | ≥ 1920px | .pure-u-xxl-* |
xxxl | @media 螢幕與 (最小寬度: 160em) | ≥ 2560px | .pure-u-xxxl-* |
x4k | @media 螢幕與 (最小寬度: 240em) | ≥ 3840px | .pure-u-x4k-* |
針對寬度使用相對單位
您可能已經注意到我們使用 em 來設定預設的 CSS 媒體查詢寬度，而不是 px。這是個有意義的決策，因為它能讓人們放大網頁時，媒體查詢可以適當地回應。請參考 Brad Frost 的這篇文章，了解在媒體查詢中使用相對單位的背景資訊。
如果您確實想要使用 em 以外的單位，您可以在 入門 頁面中隨時修改預設的媒體查詢。從 em 轉換為 px 非常簡單
1em == 16px ** 從 em 到 px 的轉換是基於瀏覽器的預設字型大小，一般來說是 16px，但使用者可以在瀏覽器設定中覆寫。
純回應式格線範例
下方的範例利用 Pure 的回應式格線建立一個具有四個欄位的列。這些欄位在小螢幕堆疊，在中型螢幕佔用 width: 50%，在大螢幕佔用 width: 25%。
在小螢幕時加上 .pure-u-1 類別，在中型螢幕時加上 .pure-u-md-1-2 類別，在大螢幕時加上 .pure-u-lg-1-4 類別即可。調整頁面大小，即可查看格線回應螢幕大小的情況。
