如您所見，.game-board div 是網(wǎng)格容器，而.box div 是網(wǎng)格項(xiàng)?，F(xiàn)在我們將通過 Grid 布局來實(shí)現(xiàn) 3×3 布局。

.game-board 
    {
        display: grid;
        grid-template-rows: 200px 200px 200px;
        grid-template-columns: 200px 200px 200px;
    }

在這里，我還使用了其他兩個(gè)屬性。

grid-template-rows屬性允許我們指定網(wǎng)格中的行數(shù)及行的高度。那么你應(yīng)該猜到另一個(gè)屬性是干什么的了。

grid-template-columns屬性允許我們指定網(wǎng)格中的列數(shù)及列的寬度。您可以指定任何單位的尺寸大小，包括像素，百分比和其他單位fr ，我們將在下一步學(xué)習(xí)。

fr 單位(等分)

fr 是為網(wǎng)格布局定義的一個(gè)新單位。它可以幫助你擺脫計(jì)算百分比，并將可用空間等分。

例如，如果在網(wǎng)格容器中設(shè)置這個(gè)規(guī)則：grid-template-rows: 2fr 3fr ，那么你的網(wǎng)格容器將首先被分成 2 行。然后將數(shù)字部分加在一起，這里總和為 5， 即 5 等分。

就是說，我們將有 2 行：第一排占據(jù)垂直空間的 2/5 。 第二排占垂直空間的 3/5 。

回到我們的 Tic-Tac-Toe 例子，我們使用fr代替px 。我們想要的是，應(yīng)該有3行3列。所以，我們只需要用 3 個(gè)1fr 替換 3 個(gè)200px 即可：

.game-board 
    {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }

這里特別需要注意的是：fr 單位是等分可用空間，或者說剩余空間。看個(gè)例子

.game-board 
    {
        grid-gap:2px;
        display: grid;
        width:300px;
        height:200px;
        grid-template-rows: 100px 1fr 1fr;
        grid-template-columns: 1fr 50px 1fr;
    }

布局效果如圖：

你會(huì)看到fr 單位是將 總的尺寸 減去 單元格明確尺寸后，在等分剩余空間。grid-gap 是間隔。

repeat() 函數(shù)

在某些情況下，我們可能有很多的列和行。在grid-template屬性中指定每一個(gè)值可能會(huì)很乏味。幸運(yùn)的是，有一個(gè)repeat 函數(shù)，就像任何一個(gè)循環(huán)重復(fù)多少次輸出某個(gè)給定值。它有兩個(gè)參數(shù)。第一個(gè)是迭代次數(shù)，第二個(gè)是要重復(fù)的值。我們用repeat 函數(shù)重寫上面的例子。

.game-board
    {
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(3, 1fr);
    }

等價(jià)于：

.game-board 
    {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }

grid-template 屬性

grid-template屬性是grid-template-rows和grid-template-columns的簡(jiǎn)寫語法。 這是它的語法：grid-template: rows/columns;

我們上面的例子使用這個(gè)簡(jiǎn)寫語法后，看起來非常整齊。

.game-board
    {
        display: grid;
        grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    }

看，只需使用 2 行代碼，就可以使用網(wǎng)格布局創(chuàng)建 3×3 網(wǎng)格。

例子：

HTML

  X
  O
  O
  O
  X
  O
  O
  X
  X

CSS

.game-board
{
    width: 600px;
    height: 600px;
    margin: 0 auto;
  background-color: #34495e;
  color: #fff;
  border: 6px solid #2c3e50;
  border-radius: 10px;
    
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.box
{
  border: 6px solid #2c3e50;
  border-radius: 2px;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
}

網(wǎng)格線編號(hào),網(wǎng)格單元格，網(wǎng)格軌道

網(wǎng)格線是存在于列和行每一側(cè)的線。一組垂直線將空間垂直劃分成列，而另一組水平線將空間水平劃分成行。這意味著在我們之前的例子中，有四條垂直線和四條水平線包含它們之間的行和列。

在將網(wǎng)格項(xiàng)從一個(gè)位置跨越到另一個(gè)位置時(shí)，網(wǎng)格線變得非常有用。

網(wǎng)格軌道是兩條線之間的空間。 網(wǎng)格軌道可以是一行或一列。

網(wǎng)格單元格很像表格單元，是兩條相鄰垂直線和兩條相鄰水平線之間的空間。 這是網(wǎng)格中最小的單位。

定位網(wǎng)格項(xiàng)

我采取了前面的例子的網(wǎng)格，并用數(shù)字從1到9標(biāo)記每個(gè)單元格，而不是X或O，下面是它的樣子：

假設(shè)我想將第 6 個(gè)框移到第 2 個(gè)框的位置。沒有CSS網(wǎng)格，不改變 HTML 的情況下，這幾乎是一個(gè)不可能的任務(wù)，至少對(duì)我而言。但是如果我們使用網(wǎng)格模塊，改變網(wǎng)格中網(wǎng)格項(xiàng)的位置是一件輕而易舉的事情。要將第6個(gè)框移到第2個(gè)框的位置，我們必須確切知道第2個(gè)框在哪里。通過網(wǎng)格線編號(hào)的幫助，我們可以很容易地找到這個(gè)位置。第二個(gè)方框位于第2條列網(wǎng)格線之后，第3條列網(wǎng)格線之前，第1條行網(wǎng)格線之下，第2條行網(wǎng)格線之上?，F(xiàn)在我們可以使用以下屬性將這些網(wǎng)格線編號(hào)分配到第6個(gè)框中：

1. grid-column-start

2. grid-column-end

3. grid-row-start

4. grid-row-end

前兩個(gè)屬性對(duì)應(yīng)于垂直網(wǎng)格線，也就是列網(wǎng)格線的開始和結(jié)束。 最后兩個(gè)屬性是指水平網(wǎng)格線，也就是行網(wǎng)格線的開始和結(jié)束。 讓我們分配正確的網(wǎng)格線編號(hào)來移動(dòng)第 6 個(gè)框。

.box:nth-child(6)
    {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 2;
        grid-column-end: 3;
    }

還有兩個(gè)簡(jiǎn)寫屬性用于將行和列的開始網(wǎng)格線和結(jié)束網(wǎng)格線設(shè)置在一起。

.box:nth-child(6)
    {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
    }

此外，還有一個(gè)grid-area屬性是所有四個(gè)上述屬性的簡(jiǎn)寫屬性。 它按以下順序取值：grid-area: / / / ;

現(xiàn)在我們的例子可以寫成這樣

.box:nth-child(6)
    {
        grid-area: 1 / 2 / 2 / 3;
    }

上面的代碼行也可以進(jìn)一步減少。正如您所看到的，這個(gè)框只占用一行和一個(gè)列，所以我們只需要指定行和列的起始線，而無需結(jié)束線的值

.box:nth-child(6)
    {
        grid-area: 1 / 2;
    }

如果我們想要第6個(gè)框跨越兩個(gè)框的區(qū)域呢？ 這很容易通過將column-end 值加 1 的辦法來完成。

.box:nth-child(6)
    {
        grid-area: 1 / 2 / 2 / 4;
    }

您也可以使用span 關(guān)鍵字和占據(jù)的 軌道數(shù)量，來代替指定grid-row-end和grid-column-end的結(jié)束網(wǎng)格線編號(hào)。 在這種情況下，第6個(gè)框是跨越 2 列和 1 行。

.box:nth-child(6)
    {
        grid-area: 1 / 2 / 2 / span 2;
    }

網(wǎng)格區(qū)域命名

grid-area屬性也可以用來命名網(wǎng)格的某一個(gè)部分，然后我們可以用grid-template-areas屬性來定位。讓我們創(chuàng)建一個(gè)簡(jiǎn)單的 bread-and-butter 布局，頂部有一個(gè) top, nav，中間有 main 和 aside，下面是 footer。這是所需的HTML：

我們需要使用grid-area 屬性來命名每個(gè)區(qū)域：

header
    {
      grid-area: header;
      background-color: #9b59b6;
    }
     
    nav
    {
      grid-area: nav;
      background-color: #3498db;
    }
     
    main
    {
      grid-area: main;
      background-color: #2ecc71;
    }
     
    aside
    {
      grid-area: aside;
      background-color: #f1c40f;
    }
     
    footer
    {
      grid-area: footer;
      background-color: #1abc9c;
    }

現(xiàn)在我們將使用grid-template-areas屬性來指定每個(gè)網(wǎng)格區(qū)域所占據(jù)的行和列。 以下是我們?nèi)绾巫龅降模?/p>

.container
    {
          display: grid;
          grid-template-rows: 1fr 5fr 1fr;
          grid-template-columns: 2fr 5fr 3fr;
          grid-template-areas:
            "header  header  header"
            "nav     main    aside"
            "footer  footer  footer";
          grid-gap: .75em;
    }

請(qǐng)注意，header 和 footer 單詞重復(fù)三次。 這表明，header 和 footer 橫跨 3 列的寬度。 你可以把它全部寫在一行中，但是把每一行寫在一個(gè)單獨(dú)的行上很好，很干凈。 你可以看到我在這里使用了一個(gè)新的屬性grid-gap 。 它所做的只是在兩個(gè)網(wǎng)格區(qū)域之間添加一個(gè)間距。 你也可以使用grid-row-gap和grid-column-gap來為行和列指定不同的間距值。

例子：

HTML

CSS

.container
{
  display: grid;
  grid-template-rows: 1fr 5fr 1fr;
  grid-template-columns: 2fr 5fr 3fr;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-gap: .75em;
  background-color: #eee;
  width: 100vw;
  height: 100vh;
}

header
{
  grid-area: header;
  background-color: #9b59b6;
}

nav
{
  grid-area: nav;
  background-color: #3498db;
}

main
{
  grid-area: main;
  background-color: #2ecc71;
}

aside
{
  grid-area: aside;
  background-color: #f1c40f;
}

footer
{
  grid-area: footer;
  background-color: #1abc9c;
}

以上是“CSS中Grid網(wǎng)格布局的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！