CSS中Grid網格佈局詳解

CSS Grid(網格) 佈局使我們能夠比以往任何時候都更靈活地建立和控制自訂網格。 Grid(網格) 佈局使我們能夠將網頁分成具有簡單屬性的行和列。它還能讓我們在不改變任何HTML的情況下，使用 CSS 來定位和調整網格內的每個元素。它允許 HTML 純粹作為內容的容器。 HTML 結構不再受限於樣式表現，例如不要為了實現某種佈局而多次嵌套，現在這些都可以讓 CSS 來完成。

定義一個網格

Grid(網格) 模組為display 屬性提供了一個新的值： grid 。當你將任何元素的display 屬性設為grid 時，那麼這個元素就是一個網格容器(grid container)，它的所有直接子元素就成了網格項(grid items)。

讓我們創建創建一個 3×3 的佈局，做一個 Tic-Tac-Toe (井字遊戲) 棋盤。

首先，我們將寫一些HTML：

    <p class="game-board">
      <p class="box"></p>
      <p class="box"></p>
      <p class="box"></p>
      <p class="box"></p>
      <p class="box"></p>
      <p class="box"></p>
      <p class="box"></p>
      <p class="box"></p>
      <p class="box"></p>
    </p>

如你所見， .game-board# p 是網格容器，而.box p 是網格項。現在我們將透過 Grid 佈局來實現 3×3 佈局。

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

在這裡，我還使用了其他兩個屬性。

grid-template-rows 屬性允許我們指定網格中的行數及行的高度。那你應該猜到另一個屬性是做什麼的了。

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

fr 單位(等分)

fr 是為網格佈局定義的一個新單位。它可以幫助你擺脫計算百分比，並將可用空間等分。

例如，如果在網格容器中設定這個規則：grid-template-rows: 2fr 3fr ， 那麼你的網格容器就會先被分成2行。然後將數字部分加在一起，這裡總和為 5， 即 5 等分。

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

回到我們的 Tic-Tac-Toe 例子，我們使用 fr 取代 px 。我們要的是，應該有3行3列。所以，我們只需要用3 個1fr 取代3 個200px 即可：

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

這裡特別要注意的是： fr 單位是等分可用空間，或說剩餘空間。看個範例

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

佈局效果如圖：

你會看到fr#單位是將總的尺寸減去單元格明確尺寸後，在等分剩餘空間。 grid-gap 是間隔。

repeat() 函數

在某些情況下，我們可能有很多的列和行。在 grid-template 屬性中指定每一個值可能會很無聊。幸運的是，有一個 repeat 函數 ，就像任何一個迴圈重複多少次輸出某個給定值。它有兩個參數。第一個是迭代次數，第二個是要重複的數值。我們用 repeat 函數重寫上面的範例。

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

等價於：

#

    .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 的簡寫語法。 這是它的語法：grid-template: rows/columns;

我們上面的範例使用這個簡寫語法後，看起來非常整齊。

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

看，只要使用 2 行程式碼，就可以使用網格佈局建立 3×3 網格。

範例：

HTML

<p class="game-board">
  <p class="box">X</p>
  <p class="box">O</p>
  <p class="box">O</p>
  <p class="box">O</p>
  <p class="box">X</p>
  <p class="box">O</p>
  <p class="box">O</p>
  <p class="box">X</p>
  <p class="box">X</p>
</p>

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;
}

#網格線編號,網格單元格，網格軌道

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

在將網格項目從一個位置跨越到另一個位置時，網格線變得非常有用。

網格軌道是兩條線之間的空間。 網格軌道可以是一行或一列。

网格单元格很像表格单元，是两条相邻垂直线和两条相邻水平线之间的空间。 这是网格中最小的单位。

定位网格项

我采取了前面的例子的网格，并用数字从1到9标记每个单元格，而不是X或O，下面是它的样子：

假设我想将第 6 个框移到第 2 个框的位置。没有CSS网格，不改变 HTML 的情况下，这几乎是一个不可能的任务，至少对我而言。但是如果我们使用网格模块，改变网格中网格项的位置是一件轻而易举的事情。要将第6个框移到第2个框的位置，我们必须确切知道第2个框在哪里。通过网格线编号的帮助，我们可以很容易地找到这个位置。第二个方框位于第2条列网格线之后，第3条列网格线之前，第1条行网格线之下，第2条行网格线之上。现在我们可以使用以下属性将这些网格线编号分配到第6个框中：

1. grid-column-start

2. grid-column-end

3. grid-row-start

4. grid-row-end

前两个属性对应于垂直网格线，也就是列网格线的开始和结束。 最后两个属性是指水平网格线，也就是行网格线的开始和结束。 让我们分配正确的网格线编号来移动第 6 个框。

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

还有两个简写属性用于将行和列的开始网格线和结束网格线设置在一起。

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

此外，还有一个 grid-area 属性是所有四个上述属性的简写属性。 它按以下顺序取值：grid-area: / / / ;

现在我们的例子可以写成这样

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

上面的代码行也可以进一步减少。正如您所看到的，这个框只占用一行和一个列，所以我们只需要指定行和列的起始线，而无需结束线的值

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

如果我们想要第6个框跨越两个框的区域呢？ 这很容易通过将 column-end 值加 1 的办法来完成。

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

您也可以使用 span 关键字和占据的 轨道数量，来代替指定 grid-row-end 和 grid-column-end 的结束网格线编号。 在这种情况下，第6个框是跨越 2 列和 1 行。

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

网格区域命名

grid-area 属性也可以用来命名网格的某一个部分，然后我们可以用 grid-template-areas 属性来定位。让我们创建一个简单的 bread-and-butter 布局，顶部有一个 top, nav，中间有 main 和 aside，下面是 footer。这是所需的HTML：

    <p class="container">
      <header></header>
      <nav></nav>
      <main></main>
      <aside></aside>
      <footer></footer>
    </p>

我们需要使用 grid-area 属性来命名每个区域：

    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;
    }

现在我们将使用 grid-template-areas 属性来指定每个网格区域所占据的行和列。 以下是我们如何做到的：

    .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;
    }

请注意，header 和 footer 单词重复三次。 这表明，header 和 footer 横跨 3 列的宽度。 你可以把它全部写在一行中，但是把每一行写在一个单独的行上很好，很干净。 你可以看到我在这里使用了一个新的属性 grid-gap 。 它所做的只是在两个网格区域之间添加一个间距。 你也可以使用 grid-row-gap 和 grid-column-gap 来为行和列指定不同的间距值。

例子：

HTML

<p class="container">
  <header></header>
  <nav></nav>
  <main></main>
  <aside></aside>
  <footer></footer>
</p>

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网格布局允许我们更快地布局，并且更容易控制。在本教程中，我们学习了如何用CSS网格来定义布局， fr 单位，repeat 函数和一些网格系统中特定的术语。我们还学习了如何使用网格线和网格命名区域在网格容器内定位网格项目。

以上是CSS中Grid網格佈局詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！