要定義一個(gè)網(wǎng)格容器并設(shè)置行列，需使用 display: grid 并通過(guò)相關(guān)屬性控制行列。1. 創(chuàng)建網(wǎng)格容器：給父元素添加 display: grid，使其子元素成為網(wǎng)格項(xiàng)；2. 設(shè)置列寬：使用 grid-template-columns 屬性，可指定固定寬度、fr 單位或自動(dòng)調(diào)整列數(shù)；3. 設(shè)置行高：使用 grid-template-rows 屬性，同樣支持固定值、fr 單位及自動(dòng)調(diào)整；4. 控制間距：通過(guò) gap、row-gap 或 column-gap 設(shè)置行列之間的空隙，以實(shí)現(xiàn)更靈活的布局效果。

要定義一個(gè)網(wǎng)格容器并設(shè)置行列，其實(shí)不難，但得先理解幾個(gè)關(guān)鍵概念。簡(jiǎn)單來(lái)說(shuō)，就是在 CSS 中使用 display: grid 來(lái)創(chuàng)建一個(gè)網(wǎng)格布局，然后通過(guò)屬性來(lái)控制列和行的大小、數(shù)量等。

1. 創(chuàng)建網(wǎng)格容器

第一步是把一個(gè)元素變成網(wǎng)格容器。這一步很基礎(chǔ)，但必須做對(duì)。

• 給父容器加上 display: grid，就這么簡(jiǎn)單。
• 一旦加了這個(gè)屬性，它的直接子元素就會(huì)自動(dòng)成為網(wǎng)格項(xiàng)（grid items），按行排列。

舉個(gè)例子：

.container {
  display: grid;
}

這樣你就有了一個(gè)默認(rèn)的網(wǎng)格結(jié)構(gòu)，但它還沒(méi)指定多少列或行。接下來(lái)就是重點(diǎn)了。

2. 設(shè)置列寬：grid-template-columns

你想讓網(wǎng)格有幾個(gè)列？每列多寬？可以用 grid-template-columns 來(lái)設(shè)定。

常用寫(xiě)法包括：

• 固定寬度：比如 grid-template-columns: 200px 100px 300px; 就會(huì)創(chuàng)建三列，寬度分別是 200px、100px 和 300px。
• 使用 fr 單位：這是網(wǎng)格布局里的特色單位，表示“分?jǐn)?shù)”。比如 1fr 2fr 表示兩列，第二列是第一列的兩倍寬。
• 自動(dòng)調(diào)整：用 auto-fit 或 auto-fill 搭配 minmax() 可以實(shí)現(xiàn)響應(yīng)式列數(shù)。

例如：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

這段代碼的意思是：根據(jù)容器寬度自動(dòng)調(diào)整列的數(shù)量，每列最小 200px，最大占 1fr 的空間。

3. 設(shè)置行高：grid-template-rows

行的設(shè)置和列差不多，只是換成了 grid-template-rows。

你可以固定行高，也可以用 fr，甚至混合使用。

比如：

.container {
  grid-template-rows: 100px auto 50px;
}

這會(huì)讓第一行高 100px，第二行自動(dòng)適應(yīng)內(nèi)容高度，第三行固定為 50px。

如果你希望行也自動(dòng)適應(yīng)內(nèi)容，可以結(jié)合 grid-auto-rows 屬性：

.container {
  grid-auto-rows: minmax(100px, auto);
}

這樣新增的行至少 100px 高，如果內(nèi)容更多就自動(dòng)撐開(kāi)。

4. 簡(jiǎn)單控制間距：gap、row-gap、column-gap

在網(wǎng)格中，列與列之間、行與行之間的空隙可以通過(guò) gap 屬性控制。

• gap: 20px 30px; 表示行間距 20px，列間距 30px。
• 如果只寫(xiě)一個(gè)值，比如 gap: 20px;，那行和列都用這個(gè)值。
• 也可以分開(kāi)寫(xiě)成 row-gap 和 column-gap。

基本上就這些。掌握了怎么定義網(wǎng)格容器，以及怎么設(shè)置列和行的大小，你就可以開(kāi)始構(gòu)建各種布局了?？雌饋?lái)步驟不少，但實(shí)際寫(xiě)起來(lái)很簡(jiǎn)單，關(guān)鍵是理解每個(gè)屬性的作用。

以上是如何定義網(wǎng)格容器并設(shè)置列和行？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！