CSS Grid 是用於網(wǎng)頁二維佈局的工具，通過display: grid 創(chuàng)建容器後，使用grid-template-columns 和grid-template-rows 定義行列；1. 使用fr 單位或固定值設(shè)定大??；2. 用gap 控制間距，justify-items 和align-items 控制對齊；3. 通過grid-column 和grid-row 指定子項起始線位置；4. 利用repeat() 簡化重複結(jié)構(gòu)定義；5. 使用grid-area 實現(xiàn)命名區(qū)域模板佈局。

CSS Grid 是現(xiàn)代網(wǎng)頁佈局的利器，尤其適合做二維網(wǎng)格結(jié)構(gòu)。它不像Flexbox 那樣只擅長單方向排列，而是能同時處理行和列，讓你更靈活地控制頁面結(jié)構(gòu)。

基本語法：定義一個grid 容器

要使用CSS Grid，首先得在容器上設(shè)置display: grid; 。這一步是基礎(chǔ)，不加這個屬性，後面的網(wǎng)格設(shè)置都不起作用。

接著可以使用grid-template-columns和grid-template-rows來定義列和行的數(shù)量及大小。比如：

 .container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

上面這段代碼會創(chuàng)建三列，中間那列是左右兩列的兩倍寬。 fr單位是Grid 的特色，表示“可用空間的比例”。

你也可以混合使用固定值（如200px ）和比例單位：

 grid-template-columns: 200px 1fr 2fr;

控制間距與對齊方式

網(wǎng)格之間的空隙可以用gap屬性來設(shè)置，它可以同時設(shè)置行和列之間的間距，比如：

 gap: 20px 30px;

等價於：

 row-gap: 20px;
column-gap: 30px;

對齊方面，Grid 提供了justify-items和align-items來控制子元素在單元格內(nèi)的對齊方式。例如：

• justify-items: center;讓所有子項水平居中
• align-items: start;讓它們頂部對齊

如果你只想單獨控制某個子項的位置，可以用justify-self或align-self 。

使用grid-line 命名或編號定位內(nèi)容

你可以通過指定子項從哪條線開始、到哪條線結(jié)束來精確控制它的位置。比如：

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

這段代碼的意思是：這個元素從第二條垂直線開始，跨越到第四條線；在第一行顯示。

你還可以給這些線命名，這樣寫起來更直觀：

 grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col2-end];

然後定位時就可以這樣寫：

 grid-column: col1-start / col2-end;

簡化複雜佈局的幾個技巧

• 用repeat()簡化重複結(jié)構(gòu)
  如果有多個相同寬度的列，不需要一個個寫：

   grid-template-columns: repeat(3, 1fr);

• 自動調(diào)整列數(shù)並適應(yīng)容器寬度

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  這個組合非常實用，特別適合響應(yīng)式設(shè)計。

• 用grid-area快速佈局模板可以直接為每個區(qū)域命名，並在容器裡定義模板結(jié)構(gòu)：

   .container {
    display: grid;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
  }

  然後每個子項只需加上對應(yīng)的grid-area: header;就能自動歸位。

  ---

  基本上就這些，掌握好這些基本概念和常用技巧，就能輕鬆做出各種複雜的網(wǎng)格佈局了。

  以上是使用CSS網(wǎng)格創(chuàng)建網(wǎng)格佈局的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！