註：我剛剛翻譯了下面的文字並將其發佈在這裡。參考文獻在本文末。

你好。今天我想談談一些特殊的 CSS 網格關鍵字，它們對於定義網格軌道的大小很有用。使用這些關鍵字的能力將使您能夠精確地確定所需的網格軌道尺寸。那麼，我們走吧。

這篇文章是我介紹 CSS Grid 系列的一部分。如果您想查看我以前的帖子，可以在這裡找到完整的目錄。

介紹尺寸關鍵字

當談到CSS網格時，只有三個關鍵字可以用來決定軌道的大小。這些關鍵字是 auto、min-content 和 max-content。所有這些都可以在 CSS 屬性 grid-template-colums 和 grid-template-rows 中使用。

最小內容和最大內容

如果您想要讓網格軌道的大小取決於其內容，則必須使用兩個關鍵字之一：min-content 或 max-content。 最小內容網格軌道將嘗試保持最小大小而不溢出其內容。 最大內容網格軌道 但是，假設可擴展的可用空間是無限的，並假定內容的理想寬度。

讓我向您展示一些範例，顯示所提及的關鍵字之間的差異。請記住，每個映像包含兩​​個容器：左側帶有 min-content 網格列 的容器，右側帶有 max-content 網格列 的容器。

正如您在此處看到的，最小內容列和最大內容列之間的大小沒有差異。原因是圖像有其“預設固定大小”，除非您明確告訴它更改，否則該圖像不會更改。另一方面，文字的內容可以根據情況「壓縮」其大小。這種壓縮是使用文字換行（文字換行）來完成的，即單字不換行。知道了這一點，讓我們用一些文字替換上面範例中的圖像。

這次，列寬不同。列 min-content 強制其文字內容“換行”，而列 max-content 擴展太多，以至於不需要文字換行。請注意，列 min-content 與最長單字的寬度相同，且欄位 max-content 現在比容器本身更寬。

當一列包含多個內容類型時會發生什麼？以下是包含圖像和文字的列的範例。

在這兩種情況下，最寬的元素決定列的大小。對於 min-content，該元素是圖像或最長的單字。對於列 max-width，這是圖像或整個文字。請注意兩種內容類型如何在列中垂直分隔。我想在我以後的一篇文章中討論這種行為。

關鍵字自動

關鍵字auto與我在前兩篇文章中描述的單元fr有關。它同樣確定網格軌道必須“填充”給定軸上的所有可用空間。

.container {
    /** ... **/
    grid-template-columns: auto auto;
}

但是，auto 關鍵字和 fr 單位之間有兩個主要差異。首先，關鍵字 auto 不是一個單位，因此您不能像使用 fr 那樣將其與數值（例如 2auto）一起使用。其次，當兩者一起使用時，關鍵字 auto 總是會「輸掉」單位 fr。請參閱下面的範例。

.container {
    /** ... **/
    grid-template-columns: auto 1fr;
}

您可以預期 auto 列在水平維度上「填滿」與 fr 列等量的空間。然而，列 fr 的存在會導致該列自動「縮小」其大小以適應目前內容的大小。

請注意，對於文字內容，自動網格軌道的行為與最小內容/最大內容網格軌道不同。當 auto 與 fr 混合時，auto-track 永遠不會強製文字內容“換行”，除非自動追蹤“填充”所有可用空間。

.container {
    /** ... **/
    width: 200px;
    grid-template-columns: auto 1fr;
}

感謝您閱讀這篇短文。如果您想閱讀更多這樣的內容，請關注我的 dev.to 或 Twitter 帳戶。另外，請隨時給我任何回饋。我很想閱讀您的評論。我們下一篇文章再見！

PS。如果您想支持我的工作，請給我一杯咖啡，我將不勝感激。謝謝。 ❤️

來源

文章作者：Mateusz Kirmuć.