七種使用CSS Grid布局網(wǎng)頁元素的方法

(本文于2017年3月23日更新。具體內(nèi)容：CSS Grid布局的瀏覽器支持)

本文將介紹七種使用Grid Layout模塊在網(wǎng)頁中放置元素的方法。

SitePoint之前發(fā)表過《CSS Grid Layout簡介》。最近，我還寫了《CSS Grid Layout工作草案的現(xiàn)狀》。

這里，重點(diǎn)將完全放在使用CSS Grid在網(wǎng)頁上布局元素的具體方法上?，F(xiàn)在，讓我們逐一介紹它們。

關(guān)鍵要點(diǎn)

• CSS Grid Layout允許使用多種方法在網(wǎng)頁上靈活地放置元素，例如單個屬性、grid-row和grid-column、grid-area、span關(guān)鍵字、命名線、具有公共名稱和span關(guān)鍵字的命名線以及命名網(wǎng)格區(qū)域。
• grid-area屬性允許指定元素的左上角和右下角，而span關(guān)鍵字可用于設(shè)置元素將跨越的列數(shù)或行數(shù)。
• 命名線有助于組織復(fù)雜的布局，每條線都根據(jù)其將包含的內(nèi)容類型分配一個名稱?？梢酝ㄟ^為特定部分的所有網(wǎng)格線使用公共名稱并使用span關(guān)鍵字指定元素跨越的這些線條的數(shù)量來進(jìn)一步簡化此過程。
• 命名網(wǎng)格區(qū)域允許為不同區(qū)域分配名稱，而不是使用線條，從而使元素分配變得簡單明了。但是，命名網(wǎng)格區(qū)域目前只能是矩形。

CSS Grid布局的瀏覽器支持

目前，Grid Layout還沒有一致的瀏覽器支持。但是，截至2017年3月，Chrome和Firefox瀏覽器的最新版本默認(rèn)都已支持CSS Grid Layout。IE仍然支持舊的實(shí)現(xiàn)，Opera需要啟用實(shí)驗(yàn)性Web平臺標(biāo)志，而Safari則完全不支持。為了正確使用本文中的所有示例，建議您使用Chrome或Firefox。對于由于某種原因發(fā)現(xiàn)使用這些瀏覽器存在問題的讀者，我已經(jīng)添加了屏幕截圖以顯示每種技術(shù)的最終結(jié)果。

方法一：使用單個屬性指定所有內(nèi)容

這是我們之前文章中一直用來放置元素的版本。此方法冗長但易于理解?；旧希褂?code>grid-column-start/grid-column-end和grid-row-start/grid-row-end屬性指定元素的左右和上下邊界。如果元素只跨越一行或一列，您可以省略-end屬性，這樣您就需要編寫更少的CSS。

在下面的演示中，元素A已使用以下CSS放置在第二行和第二列中：

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

可以使用以下方法實(shí)現(xiàn)相同的效果：

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

CodePen演示鏈接

方法二：使用grid-row和grid-column

盡管我們第一個示例中的CSS可讀且易于理解，但我們必須使用四個不同的屬性來放置單個元素。我們可以只使用兩個屬性（grid-column和grid-row）而不是四個屬性。這兩個屬性都將采用以斜杠分隔的兩個值，其中第一個值將確定元素的起始線，第二個值將確定元素的結(jié)束線。

以下是您需要使用這些屬性的語法：

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

要將項(xiàng)目C放置在網(wǎng)格的右下角，我們可以使用以下CSS：

.selector {
  grid-row: row-start / row-end;
  grid-column: col-start / col-end;
}

CodePen演示鏈接

方法三：使用grid-area

從技術(shù)上講，我們正在布局的項(xiàng)目占據(jù)了網(wǎng)頁的特定區(qū)域。該項(xiàng)目的邊界由我們?yōu)榫W(wǎng)格線提供的值確定?？梢允褂?code>grid-area屬性一次提供所有這些值。

以下是使用此屬性時的CSS外觀：

.c {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

如果您難以記住這些值的正確順序，只需記住首先必須指定左上角（row-start - col-start）角，然后指定元素的右下角（row-end - col-end）角。

與前面的示例一樣，要將項(xiàng)目C放置在網(wǎng)格的右下角，我們可以使用以下CSS：

.selector {
  grid-area: row-start / col-start / row-end / col-end;
}

CodePen演示鏈接

方法四：使用span關(guān)鍵字

在布局元素時，除了指定結(jié)束線外，還可以使用span關(guān)鍵字來設(shè)置特定元素將跨越的列數(shù)或行數(shù)。

以下是使用span關(guān)鍵字的正確語法：

.c {
  grid-area: 2 / 2 / 4 / 4;
}

如果您的元素只跨越一行或一列，您可以省略span關(guān)鍵字及其值。

這次讓我們將項(xiàng)目C放置在網(wǎng)格的左上角。我們可以使用以下CSS來做到這一點(diǎn)。

.selector {
  grid-row: row-start / span row-span-value;
  grid-column: col-start / span col-span-value;
}

CodePen演示鏈接

方法五：使用命名線

到目前為止，我們一直在使用原始數(shù)字來指定網(wǎng)格線，當(dāng)我們處理簡單的布局時，它很容易使用。但是，當(dāng)您必須放置多個元素時，它可能會有點(diǎn)混亂。大多數(shù)情況下，頁面上的元素將屬于特定類別。例如，頁眉可能從列線c1到列線c2，從行線r1到行線r2。對所有線條進(jìn)行正確命名，然后使用這些名稱而不是數(shù)字來放置元素會容易得多。

讓我們創(chuàng)建一個非?；镜牟季謥硎垢拍罡逦?。首先，我們必須修改應(yīng)用于網(wǎng)格容器的CSS：

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

我在上面所做的是根據(jù)它們將包含的內(nèi)容類型為所有線條分配名稱。這里的想法是使用能讓我們了解不同元素位置的名稱。在這個特定示例中，我們的頁眉元素跨越所有列。因此，分別為第一列線和最后一列線分配名稱“head-col-start”和“head-col-end”將清楚地表明這些線代表頁眉的左右端。所有其他線條都可以以類似的方式命名。在所有線條命名之后，我們可以使用以下CSS來放置所有元素。

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

盡管我們必須編寫比平時更多的CSS，但現(xiàn)在只需查看CSS就能了解元素的位置。

CodePen演示鏈接

方法六：使用具有公共名稱和span關(guān)鍵字的命名線

在前面的方法中，所有線條都有不同的名稱，標(biāo)記元素的起始點(diǎn)、中點(diǎn)或結(jié)束點(diǎn)。例如，“content-col-start”和“content-col-mid”標(biāo)記了我們網(wǎng)頁內(nèi)容部分的起始點(diǎn)和中點(diǎn)。如果內(nèi)容部分覆蓋了更多行，我們將不得不提出其他行名，例如“content-col-mid-one”、“content-col-mid-two”等等。

在這種情況下，我們可以為內(nèi)容部分的所有網(wǎng)格線只使用一個公共名稱，例如“content”，然后使用span關(guān)鍵字來指定元素跨越的這些線條的數(shù)量。我們也可以只在行名旁邊提及一個數(shù)字來設(shè)置元素將跨越的行數(shù)或列數(shù)。

使用此方法，CSS 將如下所示：

.selector {
  grid-row: row-start / row-end;
  grid-column: col-start / col-end;
}

與最后一種方法一樣，此方法也要求您修改網(wǎng)格容器的CSS。

.c {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

每個命名的列線都具有相同的名稱，表示它們的寬度（以像素為單位），每個命名的行線都表示特定網(wǎng)頁部分所覆蓋的行。在此演示中，我在側(cè)邊欄下方引入了一個廣告部分。這是CSS：

.selector {
  grid-area: row-start / col-start / row-end / col-end;
}

CodePen演示鏈接

方法七：使用命名網(wǎng)格區(qū)域

我們可以通過為不同區(qū)域分配名稱來放置元素，而不是使用線條。同樣，我們必須對網(wǎng)格容器的CSS進(jìn)行一些更改。

網(wǎng)格容器的CSS現(xiàn)在應(yīng)該如下所示：

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

單個點(diǎn)（.）或一系列點(diǎn)將創(chuàng)建一個沒有任何內(nèi)容的空單元格。所有字符串都必須具有相同數(shù)量的列。這就是為什么我們必須添加點(diǎn)而不是完全留空的原因。目前，命名網(wǎng)格區(qū)域只能是矩形。但是，這可能會在規(guī)范的未來版本中發(fā)生變化。讓我們看一下所有元素的CSS。

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

定義所有網(wǎng)格區(qū)域后，將它們分配給各種元素非常簡單。請記住，在為區(qū)域分配名稱時，您不能使用任何特殊字符。這樣做會使聲明無效。

CodePen演示鏈接

結(jié)論

就是這樣！我們已經(jīng)介紹了七種使用CSS網(wǎng)格布局來布局元素的不同方法。您想與其他讀者分享關(guān)于本文的任何技巧嗎？您更喜歡在自己的項(xiàng)目中使用哪種方法？請?jiān)谠u論中告訴我們。

CSS Grid布局常見問題解答

CSS Grid布局和Flexbox有什么區(qū)別？

CSS Grid布局和Flexbox都是CSS中強(qiáng)大的布局系統(tǒng)。雖然它們看起來很相似，但它們是為不同類型的布局任務(wù)而設(shè)計(jì)的。Flexbox是一種一維布局模型，它設(shè)計(jì)用于一次在一個維度上進(jìn)行布局，要么是一行，要么是一列。另一方面，CSS Grid布局是一個二維系統(tǒng)，這意味著它可以同時處理列和行，這使其成為設(shè)計(jì)復(fù)雜網(wǎng)頁布局的理想選擇。

如何使用CSS Grid創(chuàng)建響應(yīng)式布局？

CSS Grid使創(chuàng)建響應(yīng)式布局非常簡單。您可以使用“fr”單位，它表示網(wǎng)格容器中可用空間的一部分。通過使用此單位，您可以創(chuàng)建靈活的網(wǎng)格軌道，這些軌道會根據(jù)視口大小進(jìn)行調(diào)整大小。此外，您可以使用媒體查詢來更改不同視口大小下的網(wǎng)格布局，從而更好地控制響應(yīng)式設(shè)計(jì)。

我可以同時使用CSS Grid和Flexbox嗎？

是的，CSS Grid和Flexbox可以一起用于布局。它們可以很好地互補(bǔ)。例如，您可以使用CSS Grid來布局整個頁面結(jié)構(gòu)，然后使用Flexbox來布局網(wǎng)格區(qū)域內(nèi)的單個組件或部分。

如何在CSS Grid中對齊項(xiàng)目？

CSS Grid提供了一些用于對齊項(xiàng)目的屬性，包括“justify-items”、“align-items”、“justify-self”和“align-self”。這些屬性控制網(wǎng)格項(xiàng)目沿行軸和列軸的對齊方式。您可以將項(xiàng)目對齊到起始位置、結(jié)束位置、中心位置，或者將它們拉伸以填充網(wǎng)格區(qū)域。

CSS Grid布局中的網(wǎng)格線是什么？

在CSS Grid布局中，網(wǎng)格線是構(gòu)成網(wǎng)格結(jié)構(gòu)的分隔線。它們可以是水平的或垂直的，并且從1開始編號。您可以在任意兩條線之間放置網(wǎng)格項(xiàng)目，這為您在布局設(shè)計(jì)中提供了很大的靈活性。

如何在網(wǎng)格項(xiàng)目之間創(chuàng)建間隙？

CSS Grid提供“gap”屬性（以前是“grid-gap”），您可以使用它在網(wǎng)格項(xiàng)目之間創(chuàng)建空間。此屬性可以取一個或兩個值，指定行和列之間間隙的大小。

CSS Grid中的“grid-template-areas”屬性是什么？

CSS Grid中的“grid-template-areas”屬性允許您通過引用命名的網(wǎng)格區(qū)域來創(chuàng)建網(wǎng)格布局。您可以使用網(wǎng)格項(xiàng)目上的“grid-area”屬性定義這些區(qū)域，然后使用“grid-template-areas”屬性在CSS代碼中直觀地排列它們。

如何在CSS Grid中重疊網(wǎng)格項(xiàng)目？

在CSS Grid中，您可以通過將網(wǎng)格項(xiàng)目放置到相同的網(wǎng)格單元格中或通過指定覆蓋多個單元格的網(wǎng)格區(qū)域來輕松重疊網(wǎng)格項(xiàng)目。這可以通過網(wǎng)格項(xiàng)目上的“grid-column”和“grid-row”屬性來完成。

CSS Grid中的“fr”單位是什么？

CSS Grid中的“fr”單位代表“fraction”。它表示網(wǎng)格容器中可用空間的一部分。此單位允許您創(chuàng)建靈活的網(wǎng)格軌道，這些軌道會根據(jù)可用空間進(jìn)行調(diào)整大小，從而更容易創(chuàng)建響應(yīng)式布局。

CSS Grid在現(xiàn)代瀏覽器中得到廣泛支持嗎？

是的，CSS Grid在所有現(xiàn)代瀏覽器中都得到廣泛支持，包括Chrome、Firefox、Safari和Edge。但是，它在Internet Explorer中不受支持。如果您需要支持IE，則可能需要使用備用布局方法，例如Flexbox或基于浮動的布局。

請注意，我已將圖片的格式保持為.webp，并保留了其原始鏈接。 由于無法直接訪問CodePen，我用占位符替換了CodePen鏈接。 您需要自行將這些占位符替換為實(shí)際的CodePen鏈接。

以上是您可以使用CSS網(wǎng)格布局放置元素的七種方式的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！