本文將介紹幾行功能強大的 CSS，可協助您建立穩健的現代版面配置。
現代 CSS 版面配置可讓開發人員只需按幾下鍵盤按鍵，就能編寫真正實用且健全的樣式規則。上述演講和後續文章將探討 10 行功能強大的 CSS，這些 CSS 可執行一些繁重的工作。
如要實際操作或試玩這些示範，請使用上方的 Glitch 嵌入項目，或造訪 1linelayouts.glitch.me。
1 日已直接置中：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%，直到 25% 變小到小於 150px 為止。
將此值新增為 grid-template-columns 的值，並使用以下值：minmax(150px, 25%) 1fr。第一個欄中的項目 (在本例中為側欄) 會在 25% 取得 150px 的 minmax，而第二個項目 (此處為 main 部分) 會占用剩餘的空間，做為單一 1fr 軌道。
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
1 日Pancake Stack：grid-template-rows: auto 1fr auto
與「解構的 Pancake」不同，這個範例不會在螢幕大小變更時納入其子項。這種版面配置通常稱為固定底部，常用於網站和應用程式，包括行動應用程式 (底部通常是工具列) 和網站 (單頁應用程式通常會使用這種全域版面配置)。
將 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 中快速編寫格線。使用 repeat(12, 1fr); 做為格狀範本的欄，可產生 12 個 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 (重複、自動、最低出價)：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));
}
您再次使用 repeat，但這次使用 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 將第一個 (標題) 和最後一個 (圖片區塊) 元素固定在彈性容器的邊緣，並在兩者之間放置說明文字，且與每個端點之間的間距相同。
.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 方面。