> CSS網(wǎng)格佈局模塊已徹底改變了網(wǎng)站的構(gòu)建方式。它提供了工具，可以允許不棘手的黑客和過去的創(chuàng)造性解決方案進(jìn)行高級佈局。

>

CSS網(wǎng)格佈局的簡介：本文提供了對CSS網(wǎng)格作為CSS中強(qiáng)大佈局系統(tǒng)的基本理解，並解釋瞭如何將元素轉(zhuǎn)換為行和列的網(wǎng)格框架，以實現(xiàn)結(jié)構(gòu)化內(nèi)容的放置。它涵蓋了將元素變成網(wǎng)格容器及其直接子女的基礎(chǔ)知識。

1. 網(wǎng)格結(jié)構(gòu)和項目位置：探索CSS網(wǎng)格的基本特徵，包括使用網(wǎng)格結(jié)構(gòu)使用網(wǎng)格結(jié)構(gòu)，使用網(wǎng)格 - 板塊柱，網(wǎng)格 - 板板行和網(wǎng)格 - 板置區(qū)域。本教程展示了帶有間隙屬性的間距項目，並將其整理成特定的行和列以精確的佈局。
。

2. 使用CSS網(wǎng)格的響應(yīng)式設(shè)計：強(qiáng)調(diào)CSS網(wǎng)格對響應(yīng)網(wǎng)絡(luò)設(shè)計的適應(yīng)性，展示瞭如何使用媒體查詢來改變不同屏幕尺寸的網(wǎng)格佈局。還討論了高級技術(shù)，例如重疊的網(wǎng)格項目和創(chuàng)建響應(yīng)式佈局，而無需媒體查詢，從而強(qiáng)調(diào)了CSS網(wǎng)格在現(xiàn)代網(wǎng)絡(luò)設(shè)計中的多功能性。

   >

3. 開始使用網(wǎng)格佈局

網(wǎng)格是我們可以放置內(nèi)容的列和行的框架。 （有點像桌子佈局，但在類固醇上?。?/ol>>

啟動網(wǎng)格就像這樣做一樣簡單：

>
>現(xiàn)在，包含元素的所有直接子女將是“網(wǎng)格項目”。首先，它們只會在單列中顯示為一堆行，如下演示所示。

。

>請參見筆

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

css網(wǎng)格基礎(chǔ)：顯示：sitepoint（@sitepoint）

網(wǎng)格

>



在上面的示例中，我們有一個充當(dāng)容器的

元素。在其中，我們有幾個元素，現(xiàn)在是網(wǎng)格項目：

到目前為止，我們還沒有取得太多成就，因為我們將在沒有顯示的情況下獲得相同的結(jié)果：網(wǎng)格。

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

進(jìn)一步閱讀：

在上面的演示中，容器以視口為中心。閱讀更多有關(guān)用網(wǎng)格的核心元素的更多信息。

>在網(wǎng)格項目之間設(shè)置差距
讓我們第一個空間與差距屬性分開一點：

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

請參閱codepen上的sitepoint（@sitepoint）
gap bapen。


差距屬性在不久將看到的那樣，垂直和水平的元素之間插入元素之間的空間。 （如果需要的話，我們可以設(shè)置不同的水平和垂直間隙。）

進(jìn)一步閱讀：

>閱讀有關(guān)差距屬性的更多信息。

• 設(shè)置網(wǎng)格列

>當(dāng)前，我們有一個“隱式”網(wǎng)格 - 這意味著瀏覽器只是在弄清楚自己的網(wǎng)格，因為我們尚未指定任何行或列。默認(rèn)情況下，我們只能獲得一列和四行 - 每個網(wǎng)格項目一個?，F(xiàn)在讓我們指定一些列：

>帶有網(wǎng)格 - 板塊柱，我們指定的是，我們需要四列，每個列的寬度為1FR，或一小部分可用空間。 （我們可以使用非常方便的重複（）函數(shù)來代替1FR 1FR 1FR 1FR 1FR 1FR。

現(xiàn)在，我們的網(wǎng)格項目已在一排中佈置，如下所示。

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

請參閱codepen上的codepen。

進(jìn)一步閱讀：



有關(guān)網(wǎng)格 - 板塊柱的更多信息。

>了解有關(guān)柔性長度（FR）單元的更多信息。 >

>如何使用網(wǎng)格的重複（）函數(shù)。

>

>將網(wǎng)格項目組織成行和列
• >
現(xiàn)在，讓我們將我們的網(wǎng)格項目組織成行和列，因為我們可能會在標(biāo)準(zhǔn)網(wǎng)頁佈局中看到它們。
首先，我們將用網(wǎng)格 - 板行屬性指定三行：
如果我們將該行添加到上面的筆中，那麼還沒有發(fā)生太多事情，因為我們尚未指定我們?nèi)绾蜗Ｍ覀兊木W(wǎng)格項目適合這些行和列。 （同樣，請注意，自動自動自動可以使用重複（）函數(shù)寫為重複（3，auto）。）

>

進(jìn)一步閱讀：

有關(guān)網(wǎng)格網(wǎng)板行的更多信息。

>如何使用網(wǎng)格的重複（）函數(shù)。

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

>

將網(wǎng)格項目放在網(wǎng)格上

>我們?yōu)g覽器的開發(fā)人員工具非常方便地了解CSS網(wǎng)格佈局。如果我們到目前為止檢查代碼，我們可以看到定義網(wǎng)格的水平和垂直網(wǎng)格線，如下圖所示。

>有五個垂直網(wǎng)格線和四個水平網(wǎng)格線，它們都編號了。我們可以使用這些網(wǎng)格線來指定我們希望如何佈置網(wǎng)格項目。 >

>讓我們首先設(shè)置
元素以跨越四列和一行：

>這告訴

從編號為1的網(wǎng)格列線開始，並在編號為5的列線上結(jié)束。由於未指定端線，它只是跨越下一行，因此網(wǎng)格行：1等於網(wǎng)格行：1 /2

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

讓我們做類似於的事情：

>

這裡唯一的區(qū)別是我們將設(shè)置為位於第3和第4行之間。

現(xiàn)在，讓我們定位和元素：>

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

結(jié)果顯示在下面的筆中。

>請參閱筆

css網(wǎng)格基礎(chǔ)：通過sitepoint（@sitepoint）

在codepen上放置編號行的項目。

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>


>現(xiàn)在，我們有一個靈活且響應(yīng)的佈局，而沒有黑客的浮標(biāo)，溢出和過去的其他噩夢。如果我們將內(nèi)容添加到網(wǎng)格項目中，它們將擴(kuò)展以包含該內(nèi)容，並且並排列將始終具有相等的高度。 （對於那些在Noughties中與CSS合作的人，實現(xiàn)同等高度的專欄是一場噩夢?。?br>

關(guān)於編號網(wǎng)格線的有用的知識

>如果您再次查看上圖，您會發(fā)現(xiàn)，沿底部，垂直線也被負(fù)數(shù)命名。每個網(wǎng)格線都有一個正數(shù)和負(fù)數(shù)。這有很多用途，例如當(dāng)有很多網(wǎng)格線路時，我們不一定知道會有多少。我們可以將我們的

元素設(shè)置為帶有網(wǎng)格列的所有五列：1 / -1，因為最後一個垂直線被編號為5和-1。

網(wǎng)格還具有一個跨度關(guān)鍵字，我們可以用它來告訴元素跨越許多行或列。我們

佈局的另一個選項是編寫網(wǎng)格列：1 / span 4。這告訴元素從第一個網(wǎng)格線開始，並在我們的四個列中跨越跨度。

在上面的筆中嘗試這些變化。

進(jìn)一步閱讀：

• 了解有關(guān)網(wǎng)格線的更多信息。
• 網(wǎng)格線編號的方向受我們的佈局寫作模式的影響。
了解有關(guān)網(wǎng)格列的更多信息。
閱讀網(wǎng)格規(guī)範(fàn)中的跨度關(guān)鍵字。
• >

>使用名為網(wǎng)格線

放置網(wǎng)格項目

>我們已經(jīng)看到瞭如何使用編號的網(wǎng)格線在網(wǎng)格上組織元素。但是，我們還可以為我們的某些或全部網(wǎng)格線命名並引用這些線條 - 這可以更直觀，並使我們免於計算網(wǎng)格線。

>讓我們更新我們的佈局以包括一些命名行：

在上面的代碼中，我們僅命名了三條垂直網(wǎng)格線。這些名稱在我們的列寬度旁邊的方括號中移動，代表我們的列線。 >

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

我們現(xiàn)在可以將我們的一些元素放在網(wǎng)格上，例如：

>

我們可以在下面的演示中看到此代碼。

>

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

>請參閱筆

css網(wǎng)格基礎(chǔ)：通過sitepoint（@sitepoint）

在codepen上放置命名行的項目





進(jìn)一步閱讀：

>了解有關(guān)命名網(wǎng)格線的更多信息。

>在網(wǎng)格規(guī)範(fàn)中閱讀有關(guān)命名線的信息。

>使用命名網(wǎng)格區(qū)域放置網(wǎng)格項目
>以一種簡單而直觀的方式，網(wǎng)格佈局的最有趣和最“設(shè)計師友好”的功能之一就是能夠命名網(wǎng)格區(qū)域（即網(wǎng)格中的一個或多個單元格），然後使用這些名稱來佈置我們的網(wǎng)格物品。它是這樣的工作：

>

>使用網(wǎng)格 - 板截面，我們繪製了一個簡單的文本網(wǎng)格，指定了我們希望如何佈置元素。現(xiàn)在，我們只需要將這些區(qū)域名稱應(yīng)用於我們的元素：

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

因此，

將跨越所有四個列，元素將僅位於第二行的第一列中，依此類推。

我們可以在下面的筆中看到這一點。

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
</span><span>}
</span>

>請參見筆

css網(wǎng)格基礎(chǔ)：使用sitepoint（@sitepoint）

在codepen上使用名稱區(qū)域的項目。


這個代碼比我們之前的代碼要簡單得多，無論是使用編號還是命名行。使用這樣的命名網(wǎng)格區(qū)域幾乎是令人尷尬的簡單 - 例如使用Wysiwyg編輯器而不是編寫真實的代碼。但是請放心，這不是作弊！這只是超級酷。


使用線號並帶有網(wǎng)格區(qū)域的命名行

>值得注意的是，我們還可以使用行號和/或命名線來定義網(wǎng)格區(qū)域。例如，我們可以做類似的事情，而不是使用網(wǎng)格 - 板截面屬性：>

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

模式是row-start / column-start / row-end / column-end。您可以在Codepen

上查看此演示。就我個人而言，我發(fā)現(xiàn)很難記住這種行和列的模式，但是網(wǎng)格的偉大是有很多方法可以做同樣的事情。 >

更改網(wǎng)格項目的佈局

在過去的幾天中，如果我們決定在某個時候更改頁面元素的佈局，則可能會導(dǎo)致許多代碼重構(gòu)。例如，如果我們想將元素擴(kuò)展到佈局的末尾怎麼辦？對於網(wǎng)格區(qū)域，這非常容易。我們可以做到這一點：

>我們剛剛從頁腳上刪除了一個網(wǎng)格單元，並將其分配給了一邊，從而導(dǎo)致了我們在下面的筆中看到的。

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

>請參閱筆

CSS電網(wǎng)基礎(chǔ)：使用sitepoint（@sitepoint）

在codepen上放置項目2





>我們甚至可以決定我們在某個地方想要一個空單元。我們僅使用一個或多個時期來做到這一點，例如：

>

查看您是否可以預(yù)測此結(jié)果，然後查看此Codepen演示。

進(jìn)一步閱讀：

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

了解有關(guān)網(wǎng)格板序列的更多信息。 >

了解有關(guān)網(wǎng)格區(qū)域的更多信息。

使用帶有網(wǎng)格佈局的媒體查詢
>我們通常希望在小屏幕上使用不同的佈局，例如將我們的網(wǎng)格元素堆疊在單列中。一個簡單的方法是通過媒體查詢重新排序我們的網(wǎng)格區(qū)域：>
我們現(xiàn)在只指定了一個列，並在該列中設(shè)置了元素的順序。

>請參閱筆

css網(wǎng)格基礎(chǔ)：在codepen上使用sitepoint（@sitepoint）

使用媒體查詢。

>

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
</span><span>}
</span>

>按下底部的0.5倍按鈕，以查看佈局的響應(yīng)方式（或在Codepen上查看筆，並擴(kuò)大並縮小視口）。

更改網(wǎng)格項目的顯示順序

>我們現(xiàn)在處於一個很好的時刻，看看更改網(wǎng)格佈局中元素的顯示順序是多麼容易。在上面的示例中，我們的源順序為，，和，但是在我們的媒體查詢中，我們將元素設(shè)置為 element，以顯示出 element上方。很容易與網(wǎng)格交換元素的顯示順序！我們甚至可以完全扭轉(zhuǎn)所有這些的顯示順序。

>

即使不使用命名元素，我們也可以重新排序網(wǎng)格元素。默認(rèn)情況下，網(wǎng)格項目根據(jù)其HTML源訂單放置。他們的默認(rèn)順序為0。我們可以使用此訂單屬性來更改元素的視覺佈置。訂單值越低，出現(xiàn)元素就越早。即使是負(fù)整數(shù)也可以使用，因此，如果我們的

元素的順序為-1，它將首先出現(xiàn)。

>

>如上所示，我們可以將，

和的訂單值分別設(shè)置為1、2和3。 （請查看這支筆以進(jìn)行現(xiàn)場演示。）

> 不過，一個謹(jǐn)慎的詞：重新排序的元素可以是一場噩夢，以供訪問性，焦點不可預(yù)測地圍繞屏幕跳躍，因此請謹(jǐn)慎使用。

>

進(jìn)一步閱讀：

訂單屬性的官方規(guī)範(fàn)。
在MDN上說明的訂單屬性，包括有關(guān)可訪問性問題的部分。
>無媒體查詢的響應(yīng)式網(wǎng)格佈局

>我們在上面看到，我們可以使佈局響應(yīng)不同的屏幕尺寸。首先，通過將列寬度設(shè)置為諸如FR之類的柔性單元，佈局可以根據(jù)需要生長和收縮。其次，我們可以使用媒體查詢在某些斷點處重新組織佈局。

>

網(wǎng)格佈局具有無需使用媒體查詢即可進(jìn)行佈局反流的工具。但是，我們無法通過以上合作的佈局來實現(xiàn)這一目標(biāo)。它僅適用於更簡單的佈局，其中每列共享相同的寬度。

>

考慮以下html：

讓我們在寬屏幕上並排坐在這些divs上，然後堆放在小屏幕上：

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

>您可以在下面的筆中看到結(jié)果。

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

請參閱codepen上的sitepoint（@sitepoint）

的響應(yīng)式網(wǎng)格基礎(chǔ)：codepen。





（同樣，按下底部的0.5倍按鈕，以查看佈局的響應(yīng)。）

>代碼更為高級，我們在如何使用CSS GRID重複（）函數(shù)方面對其進(jìn)行了詳細(xì)說明。在此處顯示它的主要目的是讓網(wǎng)格佈局的可能性。

>

進(jìn)一步閱讀：

• >閱讀有關(guān)自動擬合關(guān)鍵字的更多信息。
• >閱讀有關(guān)使用min（）函數(shù)使用minmax（）函數(shù)的更多信息。
>

網(wǎng)格中的重疊元素

>創(chuàng)建網(wǎng)格佈局後，我們不僅可以將每個網(wǎng)格項目分配給其自己的單獨的網(wǎng)格區(qū)域。我們可以輕鬆地設(shè)置網(wǎng)格項目以部分或完整分享相同的網(wǎng)格區(qū)域。這使我們能夠創(chuàng)建美麗，創(chuàng)意的佈局 - 具有重疊的元素，而沒有任何棘手的代碼。

>讓我們創(chuàng)建一個包含圖像的簡單網(wǎng)格和部分涵蓋圖像的文本。這是html：

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

>現(xiàn)在，我們將分配一些行和圖像之間部分共享的行和列：>

該結(jié)果顯示在以下Codepen演示中。

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

請參閱pen

css網(wǎng)格基礎(chǔ)：sitepoint（@sitepoint）

上的分層網(wǎng)格元素。



div出現(xiàn)在圖像上方，僅僅是因為它按照源順序遵循圖像。我們可以通過應(yīng)用z索引來更改另一個元素在另一個元素上出現(xiàn)。例如，嘗試將z索引2的z索引設(shè)置為上方的圖像；現(xiàn)在它將涵蓋Div。 進(jìn)一步閱讀：

要了解圖像在上面的演示中的定位，請查看如何使用CSS對象擬合和對象位置。

>

了解有關(guān)Z-Index屬性的更多信息。

>
總結(jié)
本文旨在作為CSS網(wǎng)格佈局可以做的事情的基本介紹。希望它將為進(jìn)一步的學(xué)習(xí)和發(fā)現(xiàn)提供跳板。而且有一個

巨大的

您可以了解網(wǎng)格。 >

網(wǎng)格與Flexbox

一個永恆的問題是我們是否應(yīng)該使用網(wǎng)格或flexbox。的確，這兩個佈局工具可以做的事情之間存在一些重疊。通常，在有重疊的地方，值得進(jìn)行一些測試以查看哪種特定情況下具有更好的工具包。 >

作為一般規(guī)則，請記住這一點：

>

Flexbox主要設(shè)計用於朝單個方向鋪設(shè)元素（即使這些元素跨線包裝）。

網(wǎng)格設(shè)計用於在兩個方向上佈置元素，以便它們水平和垂直對齊。

>

出於這個原因，網(wǎng)格通常是整頁佈局的更好選擇，而Flexbox則更好地用於佈置菜單。
• 。
要進(jìn)行更深入的網(wǎng)格和Flexbox比較，請查看Flexbox或CSS網(wǎng)格？如何做出有意義的佈局決策。

• 瀏覽器支持網(wǎng)格

  >當(dāng)我們首次發(fā)表本文（早在2016年）時，網(wǎng)格對瀏覽器來說是相當(dāng)新的，並且支持並不是普遍的。如今，所有主要瀏覽器都支持網(wǎng)格。仍然會有一些較舊的瀏覽器不支持它，但是在許多情況下，這些瀏覽器仍然可以很好地顯示內(nèi)容。一種不錯的選擇方法是從移動設(shè)備的單列佈局開始，這可以作為不支持網(wǎng)格佈局的瀏覽器的後備?？梢酝ㄟ^媒體查詢添加網(wǎng)格樣式的瀏覽器，以支持它們的瀏覽器 - 將顯示在較寬的屏幕上。

  您可以查看Caniuse上網(wǎng)格的最新瀏覽器支持。

  >

  學(xué)習(xí)網(wǎng)格的資源
  >最後，讓我們以一些進(jìn)一步的學(xué)習(xí)資源結(jié)束。許多了不起的人提供了有關(guān)網(wǎng)格的教程，視頻，書籍等。這裡只有幾個：
  Tiffany Brown的第三版
  • CSS Master，第三版，是CSS的一個很好的介紹，並在如何使用網(wǎng)格和其他佈局方法的深度指導(dǎo)下進(jìn)行了深入的指導(dǎo)。 >
  MDN網(wǎng)格參考。
  雷切爾·安德魯（Rachel Andrew）的示例網(wǎng)站。 （實際上，雷切爾·安德魯（Rachel Andrew）有許多令人難以置信的文章，教程，視頻，甚至還有一本關(guān)於網(wǎng)格佈局的書，並且是其中最重要的專家。谷歌搜索“ Rachel Andrew Grid”將為學(xué)習(xí)網(wǎng)格帶來大量的材料。） > Jen Simmons的LATOUT LAND YOUTUBE系列。 （Jen是另一個值得谷歌搜索的名字。）
  • >
  凱文·鮑威爾（Kevin Powell）在YouTube上介紹了許多值得一看的奇妙的網(wǎng)格教程。
  • > CSS-Tricks為CSS網(wǎng)格提供了完整的指南，這是一個非常方便的資源。
  關(guān)於CSS網(wǎng)格佈局的常見問題
  什麼是CSS網(wǎng)格佈局？
  CSS網(wǎng)格佈局是CSS中的一個佈局系統(tǒng)，可讓您為網(wǎng)頁創(chuàng)建複雜的基於二維網(wǎng)格的佈局。它提供了一種更加靈活，更有效的方法來設(shè)計和定位元素在網(wǎng)格中。

  >

  >如何在網(wǎng)頁上啟用CSS網(wǎng)格？
  啟用CSS網(wǎng)格，您可以使用顯示：網(wǎng)格; CSS代碼中的屬性。這將使所選的容器成為網(wǎng)格容器。

  >

  CSS網(wǎng)格的主要組件是什麼？
  > CSS網(wǎng)格的主要組件是網(wǎng)格容器和網(wǎng)格項目。使用顯示器來定義容器：網(wǎng)格；屬性，這些項目是放置在容器內(nèi)的元素。

  >

  >如何在CSS網(wǎng)格中定義行和列？

  >您可以通過設(shè)置諸如網(wǎng)格 - 網(wǎng)絡(luò)之類的屬性來定義行和列來定義行和列 - 排，網(wǎng)格 - 板塊柱或使用速記屬性網(wǎng)格板。

  >我可以在CSS網(wǎng)格中具有不同的列寬度和行高度嗎？通過在網(wǎng)格模板定義中使用不同的值，例如固定長度，百分比或用於柔性尺寸的FR單元。

  我可以在網(wǎng)格中嵌套網(wǎng)格嗎？ ??

  是的，您可以將網(wǎng)格嵌套在網(wǎng)格中，通過使網(wǎng)格項目本身為網(wǎng)格容器來創(chuàng)建複雜的佈局。

  我可以使網(wǎng)格適應(yīng)不同的屏幕尺寸嗎？您可以使用媒體查詢，百分比或相對單元將網(wǎng)格佈局調(diào)整到不同的屏幕尺寸和設(shè)備中。

  >

以上是初學(xué)者的CSS網(wǎng)格佈局指南的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！