本文重點介紹幾行功能強大的 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;
}
現在，隨著您增減螢幕大小，這些 Flex 項目會同時縮小及擴大。
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
與「解構的 Pancake」不同，這個範例不會在螢幕大小變更時納入其子項。通常稱為固定式頁尾。這個版面配置常用於網站和應用程式、行動應用程式 (頁尾通常是工具列) 和網站 (單一頁面應用程式通常會使用這個全域版面配置)。
在元件中新增 display: grid 即可顯示單一欄的格線，但主要區域的高度和下方含有頁尾的內容。
如要讓頁尾固定在底部，請新增以下內容：
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
這個選項會設定標頭和頁尾內容，自動擷取子項的大小，並將剩餘的空間 (1fr) 套用到主要區域，而 auto 大小的列則會採用其子項內容的最小內容大小。這樣如果內容大小增加，資料列本身就會隨之放大。
05. 傳統版 Holy Grail 版面配置：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-Span 格線：grid-template-columns: repeat(12, 1fr)
接著我們要介紹另一個經典款：12 段式網格。您可以使用 repeat() 函式在 CSS 中快速編寫格線。使用：針對格狀範本資料欄提供 repeat(12, 1fr);，每個 1fr 可各 12 欄。
.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 (重複、自動、最低出價)：grid-template-columns(auto-fit, minmax(<base>, 1fr))
以這個第七個例子來說，結合您已學過的幾個概念，建立回應式版面配置，並自動置身有彈性的子項。效果好吃。這裡需要記住的重要詞彙是 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 的部分更是如此。