這篇文章重點介紹一些 CSS 強大的功能，可執行許多繁重的工作，並協助您打造完善的現代化版面配置。
新型 CSS 版面配置讓開發人員只需按幾個按鍵，即可編寫實際實用且強大的樣式規則。上圖和後續文章將探討 10 大強大的 CSS 技術，有助於執行重大的工作。
如要自行觀看或嘗試這些示範，請使用上方的 Glitch 嵌入或造訪 1linelayouts.glitch.me。
10 月目前置中：place-items: center
針對第一個「單行」版面配置，我們希望能解答所有 CSS 應用中最大的謎團：將內容置中。我想知道 place-items: center 比想像中簡單多了，
首先，請將 grid 指定為 display 方法，然後在相同元素上寫入 place-items: center。place-items 是一次設定 align-items 和 justify-items 的簡寫。如果設為 center，align-items 和 justify-items 都會設為 center。
.parent {
display: grid;
place-items: center;
}
無論內建函式的大小為何，都可以確保內容完全符合父項內部。
02. 解構鬆餅：flex: <grow> <shrink> <baseWidth>
接下來我們要拿去建構的鬆餅！舉例來說，行銷網站的常見版面配置有 3 項，通常包含圖片、標題和一些文字來描述產品特色。對行動裝置而言，我們希望這些圖片能完美堆疊，並隨著螢幕變大而展開。
只要使用 Flexbox 即可達到這種效果，在螢幕調整大小時，您無需使用媒體查詢來調整這些元素的位置。
flex 簡寫代表 flex: <flex-grow> <flex-shrink> <flex-basis>。
因此，如果想讓方塊填滿 <flex-basis>，請縮小較小尺寸，但不延展以填滿額外空間，請輸入 flex: 0 1 <flex-basis>。在本例中，<flex-basis> 為 150px，如下所示：
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
如果您「要」讓方塊在下一行時延展並填滿空間，請將 <flex-grow> 設為 1，如下所示：
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
現在，隨著您放大或縮小畫面，這些彈性項目也會縮小和放大。
03. 側欄顯示：grid-template-columns: minmax(<min>, <max>) …)
此示範內容利用了格狀版面配置的 minmax 函式。我們要進行的工作是將側欄大小下限設為 150px，但在大型螢幕上，則會調整為 25%。側欄一律佔用其父項水平空間，直到 25% 小於 150px 為止。25%
將其新增為格線範本-資料欄的值，其含有以下值：minmax(150px, 25%) 1fr。第一欄的項目 (在本例中為側欄) 會在 25% 取得 150px 的 minmax，第二個項目 (這裡的 main 區段) 會將空間的其餘部分視為單一 1fr 軌跡。
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
1 日鬆餅堆疊：grid-template-rows: auto 1fr auto
與去建構的鬆餅不同，本範例不會在螢幕大小變更時納入子項。這個版面配置通常稱為固定式頁尾，常用於網站和應用程式、行動應用程式 (頁尾通常會是工具列) 以及網站 (單頁應用程式通常會使用這個全域版面配置)。
在元件中新增 display: grid 可讓您使用單欄格線，但主要區域的高度只會與下方有頁尾的內容相同。
如要將頁尾固定在底部，請新增以下內容：
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
這會將標頭和頁尾內容設為自動縮放子項的大小，並將剩餘空間 (1fr) 套用至主要區域，而 auto 大小的列則會佔用其子項的最小內容大小，因此隨著內容放大，列本身也會跟著調整。
05. 經典的聖地，版面配置：grid-template: auto 1fr auto / auto 1fr auto
這個經典的山邊版面配置會有頁首、頁尾、左側欄、右側欄和主要內容。這與上一個版面配置類似，但現在加入了側欄！
如要使用單行程式碼編寫整個格狀檢視，請使用 grid-template 屬性。如此一來，您就能同時設定列和欄。
屬性與值的組合為：grid-template: auto 1fr auto / auto 1fr auto。第一和第二份以空格分隔的清單之間有斜線，是列與欄之間的中斷點。
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
以上一個例子來說，在頁首和頁尾都已自動調整內容的大小，左側和右側欄會根據子項與其中的內建大小自動調整大小。不過，這次是水平尺寸 (寬度)，而非垂直 (高度)。
06. 12 段格線：grid-template-columns: repeat(12, 1fr)
接著我們要介紹另一個經典樣式：12 段方格。您可以使用 repeat() 函式，在 CSS 中快速編寫格線。使用：如果是格狀範本欄，則各有 12 欄，各有 12 欄。repeat(12, 1fr);1fr
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
現在您已建立 12 個柱狀軌道，我們可以將子項置於格狀檢視畫面。其中一種方法是使用格線來放置圖片。例如，grid-column: 1 / 13 會跨越第一行到最後 (13 個) 並跨越 12 個資料欄。grid-column: 1 / 5; 涵蓋前四個。
另一種撰寫方式為使用 span 關鍵字。使用 span 時，您可以設定起始線，以及要從該起點處橫跨多少欄數。在此情況下，grid-column: 1 / span 12 等於 grid-column: 1 / 13，而 grid-column: 2 / span 6 等於 grid-column: 2 / 8。
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (重複、自動、MinMax)：grid-template-columns(auto-fit, minmax(<base>, 1fr))
在這個第 7 個範例中，結合您已學到的幾個概念，建立回應式版面配置，可自動設定位置且可靈活調整的子項。完美結合。請牢記下列重要詞彙：repeat、auto-(fit|fill) 和 minmax()'，這些都是 RAM 縮寫。
整體看起來像這樣：
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
您目前是重複使用，但這次使用了 auto-fit 關鍵字，而不是明確的數值。這樣即可自動放置這些子元素。這些子項的基本最小值為 150px，最大值為 1fr，也就是說在較小的螢幕上會佔滿 1fr 的寬度，而且只要每個子項的寬度達到 150px，就會開始流向同一行。
使用 auto-fit 時，方塊的水平尺寸超過 150 像素，填滿剩餘空間。但是，如果您將這個值變更為 auto-fill，當其基本大小超出 minmax 函式中的基本大小時，值不會延展：
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. 排行：justify-content: space-between
針對下一個版面配置，這裡示範的主要點為 justify-content: space-between，這會將第一個和最後一個子項元素置於定界框的邊緣，剩餘空間會平均分配給元素之間。對於這些資訊卡，這些資訊卡使用 Flexbox 顯示模式，並使用 flex-direction: column 將方向設定為欄。
這會將標題、說明和圖片區塊放在父項資訊卡的垂直欄中。接著，套用 justify-content: space-between 將第一個 (標題) 和最後一個 (圖片區塊) 元素固定在 Flexbox 的邊緣，並在這兩個元素之間的說明文字以相同間距放置。
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. 貼近我的樣式：clamp(<min>, <actual>, <max>)
以下章節介紹一些支援較少瀏覽器的技巧，但對版面配置和回應式 UI 設計仍有一些令人振奮的影響。在這個示範中，您會使用取值範圍限制設定寬度，例如：width: clamp(<min>, <actual>, <max>)。
這會設定絕對的最小和大小上限，以及實際的大小。使用值後，如下所示：
.parent {
width: clamp(23ch, 60%, 46ch);
}
此處的大小下限為 23ch 或 23 個字元，大小上限為 46ch (46 個字元)。字元寬度單位是依據元素的字型大小 (特別是 0 字符的寬度) 而定。「實際」大小為 50%，代表元素父項寬度的 50%。
clamp() 函式的運作方式，是讓這個元素將寬度保留 50%，直到 50% 大於 46ch (在較寬的可視區域) 或小於 23ch (在可視區域中) 以下為止。您可以看到，當我延展和縮小父項大小時，這張資訊卡的寬度會增加至限制的最大點，並縮小為限制下限。由於我們套用了其他屬性來將元素置於中心，因此它會一直顯示在父項中心。這樣會使版面配置更清晰易讀，因為文字不會太寬 (高於 46ch) 或過於擠壓且狹窄 (小於 23ch)。
這也是實作回應式字體排版的好方法。例如，您可以編寫：font-size: clamp(1.5rem, 20vw, 3rem)。在這種情況下，標題的字型大小一律會在 1.5rem 和 3rem 之間固定，但會根據 20vw 實際值增加及縮小，以符合可視區域的寬度。
這項做法有助於確保在設定最小和大小上限的情況下清楚易讀。不過請注意，並非所有新版瀏覽器都支援這項功能，因此請確認您有備用和測試環境。
10. 尊重：aspect-ratio: <width> / <height>
最後，這個版面配置工具是最實驗的最實驗性工具。這項功能最近在 Chromium 84 版中導入 Chrome Canary，並已開始由 Firefox 積極導入，但目前還沒有任何穩定的瀏覽器版本。
但我想說明一下，這是很常見的問題。這只是維持圖片的長寬比。
使用 aspect-ratio 屬性來調整資訊卡大小時，綠色視覺區塊將維持 16 x 9 的顯示比例。我們採用aspect-ratio: 16 / 9的長寬比。
.video {
aspect-ratio: 16 / 9;
}
如要在不使用這項屬性的情況下維持 16 x 9 的顯示比例，您必須使用 padding-top 駭客，並提供 56.25% 的邊框間距，才能設定高寬比例。我們很快就會提供相關的資源，以避免駭客入侵，並且需要計算百分比。你就可以製作顯示比例為 1 / 1、使用 2 / 1 為 2 到 1 的正方形，以及根據固定的尺寸比例縮放這張圖片所需的任何資訊。
.square {
aspect-ratio: 1 / 1;
}
雖然這項功能仍在開發中，但日後可能還是會有不少開發人員功能，這項功能可以解決我先前多次遇到的許多開發人員愛好者，尤其是在影片和 iframe 方面。