一行 CSS 提供十種現代版面配置

這篇文章將介紹幾行功能強大的 CSS，這些程式碼可執行大量工作，協助您建構穩固的現代版面配置。

Una Kravets

開發人員只要輸入幾個按鍵，就能使用現代 CSS 版面配置編寫有意義且穩固的樣式規則。上述演講和這篇後續文章探討了 10 行強大的 CSS，可執行多項重要工作。

如要自行操作或試用這些範例，請查看上方的網站嵌入內容，或前往 1linelayouts.com。

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;
}

現在，當您放大或縮小畫面時，這兩個彈性項目都會縮小和放大。

03. 側欄顯示：grid-template-columns: minmax(<min>, <max>) …)

這個範例會運用格線版面的 minmax 函式。我們在這裡設定的側欄大小下限為 150px，但在較大的螢幕上，側欄會延展至 25%。側欄一律會佔用父項的 25% 水平空間，直到 25% 小於 150px 為止。

將此值新增為 grid-template-columns 的值，如下所示： minmax(150px, 25%) 1fr。第一欄中的項目 (本例中的側欄) 會取得 minmax 的 150px (位於 25%)，第二個項目 (本例中的 main 區段) 則會占滿剩餘空間，成為單一 1fr 軌。

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

1 日Pancake Stack：grid-template-rows: auto 1fr auto

與 Deconstructed 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); 格線範本資料欄的 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));
}

您再次使用 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. Line Up：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 設計來說，卻有非常令人期待的影響。在本範例中，您會使用 clamp 設定寬度，如下所示：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 時。

結論

感謝您透過這 10 行強大的 CSS 程式碼，瞭解如何打造出如此出色的網站。如要瞭解詳情，請觀看完整影片，並親自試用示範。