現代 CSS 布局允許開發人員只需敲擊幾下鍵盤即可編寫有意義且強大的樣式規則。今天的內容主要是想和大家分享 10 個功能強大的 CSS 布局，它們做了一些非凡的工作。

01. Super center: place-items: center

對于我們的第一個“單行”布局，讓我們解決 CSS 中最大的謎團：居中。我想讓你知道，使用 place-items: center 比你想象的更容易。

首先，指定 grid 作為顯示方式，然后，在同一個元素上寫上 place-items: center 。place-items 是同時設置align-items 和justify-items 的快速方法。通過將其設置為居中，align-items 和 justify-items 都將設置為居中。

.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%），第二列中的項目（此處為主要部分）作為單個 1fr 軌道占據剩余空間。

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

04.煎餅堆棧布局：grid-template-rows: auto 1fr auto

與 Deconstructed Pancake 不同，此示例在屏幕尺寸更改時不包含其子元素。 

這種布局通常稱為粘性頁腳，通常用于網站和應用程序、跨多個移動應用程序（頁腳通常是工具欄）和網站（單頁應用程序通常使用這種全局布局）。

將 display: grid 添加到組件將為您提供單列網格，但主要區域的高度僅與頁腳下方的內容一樣高。

要使頁腳粘在底部，請添加：

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

1fr頁眉和頁腳內容設置為自動采用其子級的大小并將剩余空間（1fr）應用于主區域，而自動調整大小的行將采用其子級最小內容的大小，以便內容大小增加，行自身會調整。

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, 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 列。網格列：1 / 5；將跨越前四列。

另一種方法是使用 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 (Repeat, Auto, MinMax): 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 寬度時，它們將開始流到同一行。

使用自動調整功能，當水平尺寸超過 150 像素時，框將拉伸以填充整個剩余空間。但是，如果將其更改為自動填充，則當超過 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將方向設置為column。

這會將標題、描述和圖像塊放置在父卡內的垂直列中。然后，應用 justify-content: space- Between 將第一個（標題）和最后一個（圖像塊）元素錨定到彈性盒的邊緣，它們之間的描述性文本與每個端點之間的間距相等。

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

09. Keep my style: 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: Clip(1.5rem, 20vw, 3rem) 。在這種情況下，標題的字體大小將始終保持在 1.5rem 和 3rem 之間，但會根據實際的 20vw 值增大和縮小以適應視口的寬度。

這是一種很好的技術，可以確保最小和最大尺寸值的可讀性，但請記住，并非所有現代瀏覽器都支持它，因此請確保您有后備措施并進行測試。

10. 保持寬高比：aspect-ratio: <width> / <height>

最后一個布局工具是最具實驗性的。它最近在 Chromium 84 中被引入到 Chrome Canary 中，Firefox 正在積極努力實現這一目標，但目前還沒有任何穩定版本的瀏覽器。

不過，我確實想提一下這一點，因為這是一個經常出現的問題。這只是保持圖像的縱橫比。

使用縱橫比屬性，當我調整卡片大小時，綠色視覺塊保持 16 x 9 縱橫比。我們通過縱橫比維持這個縱橫比：16 / 9。

.video {
  aspect-ratio: 16 / 9;
}

要在沒有此屬性的情況下保持 16 x 9 的寬高比，您需要使用 padding-top hack 并為其指定 56.25% 的填充來設置頂部與寬度的比率。 

我們很快就會擁有避免黑客攻擊和計算百分比的需要的屬性。 

您可以使用 1 / 1 的比例來制作正方形，使用 2 / 1 的比例來制作 2:1 的比例。可以設置任意圖像縮放比例。

.square {
  aspect-ratio: 1 / 1;
}

雖然此功能仍在開發中，但值得了解，因為它解決了許多開發人員面臨的沖突，而且我自己也遇到過很多次，特別是在視頻和 iframe 方面。

總結

最后，感謝您耐心閱讀完這 10 個強大的 CSS 布局知識內容。如果想要掌握它們，還需要繼續不斷實踐它們。