CSS 網格：維度關鍵字

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

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

本文是我介紹 CSS 網格系列的一部分。如果你想查看我以前的帖子，在這裡你可以找到完整的索引。

介紹尺寸關鍵字

當談到 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 的存在會導致該列自動「縮小」其大小以適應目前內容的大小。

Observe que, no caso de text content, a auto grid track se comporta de forma diferente da min-content/max-content grid track. Quando auto é misturado com fr, a auto-track nunca força o text content a "wrap", a menos que a auto-track "fill" (preencha) todo o espaço disponível.

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

Obrigado por ler este pequeno artigo. Se quiser ler mais conteúdo como este, siga minha conta dev.to ou twitter. Além disso, sinta-se à vontade para me dar qualquer tipo de feedback. Eu adoraria ler seus comentários. Vejo você em breve no meu próximo artigo!

PS. Se quiser apoiar meu trabalho, ficarei grato por uma xícara de café. Obrigado. ❤️

Fonte

Artigo escrito por Mateusz Kirmuć.

以上是CSS 網格：維度關鍵字的詳細內容。更多資訊請關注PHP中文網其他相關文章！