CSS Grid 網格布局入門

文：https://scotch.io/tutorials/getting-started-with-css-grid-layout
譯文：http://www.css88.com/archives/8661

介紹

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

定義一個網格

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

讓我們創建創建一個 3×3 的布局，做一個 Tic-Tac-Toe (井字游戲) 棋盤。首先，我們將寫一些 HTML：

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

如您所見， .game-board div 是網格容器，而 .box div 是網格項?，F在我們將通過 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 ，我們將在下一步學習。

web前端學習群：189394454，分享源碼、最新知識點、精品教程、歡迎初學者和在進階中的小伙伴。

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: ro ws / co lu mns;

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

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

看，只需使用 2 行代碼，就可以使用網格布局創建 3×3 網格。

我們在加一些背景和間隔后，上面的例子看起來像這樣：

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

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

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

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

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

定位網格項

我采取了前面的例子的網格，并用數字從1到9標記每個單元格，而不是X或O，下面是它的樣子：

假設我想將第 6 個框移到第 2 個框的位置。沒有CSS網格，不改變 HTML 的情況下，這幾乎是一個不可能的任務，至少對我而言。（愚人碼頭注，如果單純這樣的效果圖，用FlexBox布局實現問題不大）但是如果我們使用網格模塊，改變網格中網格項的位置是一件輕而易舉的事情。要將第6個框移到第2個框的位置，我們必須確切知道第2個框在哪里。通過網格線編號的幫助，我們可以很容易地找到這個位置。第二個方框位于第2條列網格線之后，第3條列網格線之前，第1條行網格線之下，第2條行網格線之上?，F在我們可以使用以下屬性將這些網格線編號分配到第6個框中：

grid-column-start
grid-column-end
grid-row-start
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: <row-start> / <column-start> / <row-end> / <column-end>;

現在我們的例子可以寫成這樣

.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：

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

我們需要使用 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 來為行和列指定不同的間距值。

web前端學習群：189394454，分享源碼、最新知識點、精品教程、歡迎初學者和在進階中的小伙伴。

CodePen上的這個例子：

瀏覽器支持

在寫這篇文章的時候，CSS Grid 布局很多瀏覽器已經原生支持。根據 caniuse.com 的統計，所有主流瀏覽器都支持CSS Grid 布局，Internet Explorer 11 部分支持 -ms- 前綴， Opera Mini 根本不支持。

結論

CSS網格布局允許我們更快地布局，并且更容易控制。在本教程中，我們學習了如何用CSS網格來定義布局， fr 單位，repeat 函數和一些網格系統中特定的術語。我們還學習了如何使用網格線和網格命名區域在網格容器內定位網格項目。但這只是一個開始。在下一個教程中，我們將深入到CSS網格。

星 Galaxy Fold 和 Surface Duo 以及華為mate X等系列折疊屏手機問世至今已有三年多的時間。此后，三星 Galaxy Z Fold 3 和 Galaxy Z Flip 3、華為mate X2S、榮耀magic V系列等手機均已上市?？烧郫B設備可供購買，目前正在被消費者使用，隨之而來的是我們作為開發人員可以開始探索這種新型設備和響應式設計的下一個發展的機會。

這些 Web 平臺功能與現有概念（例如視口和媒體查詢）集成，因此開發人員和設計人員可以花更多時間思考如何利用兩個顯示器來創建增強體驗，而不是學習一組新代碼來構建它們。

使用新的 CSS 媒體功能檢測可折疊設備

雙屏和可折疊設備只是響應式設計的下一步，因此它們被視為另一個響應式設計目標，我們可以使用媒體功能為其設計樣式。我們今天已經使用媒體功能和查詢來定位臺式機、平板電腦和手機，現在我們擁有 CSS Viewport Segments 媒體功能來定位我們的可折疊和雙屏設備。

horizontal-viewport-segments

視口分段媒體查詢可以有兩個值。第一個是horizontal-viewport-segments，這表示設備鉸鏈垂直且視口被硬件鉸鏈拆分或折疊成列時的設備狀態。

當horizonal-viewport-segment鉸鏈處于垂直折疊姿勢時，目標是設備。

為了專門為這種方向的可折疊設備提供樣式，我們將編寫以下內容：

@media (horizontal-viewport-segments: 2) {
// Styles specific to the device in this orientation
}

整數表示設備方向中存在的視口數量。當設備像一本書一樣處于垂直折疊姿勢時，我們在水平方向有兩個不同的視口，在垂直方向只有一個視口。

我們還可以結合我們的媒體查詢來定位雙屏設備和某些視口寬度，以提供特定的樣式：

@media (horizontal-viewport-segments: 2) and (min-width: 540px) {
   body {
       background: yellow;
  }
}

vertical-viewport-segments

我們的視口分段媒體功能的第二個值是vertical-viewport-segments，這是設備鉸鏈水平時設備的狀態，并且硬件鉸鏈將我們的視口分成行。

vertical-viewport-segments目標設備處于水平折疊姿勢。

要定位在這個方向旋轉的設備，我們將使用以下代碼：

@media (vertical-viewport-segments: 2) {
  // Styles specific to the device in this orientation
}

使用 JavaScript 檢測可折疊設備

在某些情況下，您可能無法或不想使用 CSS 媒體查詢來檢測您的用戶是否在可折疊設備上，這就是 JavaScript API 的用武之地。最初，提出了一個名為 Windows Segments Enumeration 的全新 API ，但在開發者社區通過原始試驗獲得反饋后，在現有的Visual Viewport API 草案規范的基礎上構建更有意義。

視口段屬性

視口段表示位于彼此相鄰的單獨顯示器上的窗口區域。要檢測雙屏設備，您可以使用以下代碼查詢 segments 屬性：

const segments=window.visualViewport.segments;

此查詢返回的值將是一個數組DOMRects，指示有多少視口。如果只有一個視口段，則查詢將返回null，并以這種方式實現以防止將來出現兼容性問題，以免開發人員開始使用visualViewport.segments[0]針對單屏設備。

在雙屏設備上，查詢將返回 2 DOMRects，表示當瀏覽器窗口跨越折疊時可用的 2 個視口。

我們存儲在segments常量中的這個值是查詢屬性時設備狀態的不可變快照，如果瀏覽器窗口調整大小或設備旋轉，之前檢索到的視口段不再有效，需要查詢再次通過調整大小或方向事件（或兩者）。

如果您調整瀏覽器窗口的大小以僅跨越一個顯示區域，我們將觸發調整大小事件。

如果您旋轉設備，這將觸發調整大小和方向事件，您可以使用這些事件再次查詢屬性以獲取瀏覽器顯示區域的當前狀態。

window.addEventListener("resize", function() {
   const segments=window.visualViewport.segments;
   console.log(segments.length); *// 1*
});

何時使用 JAVASCRIPT API 與 CSS 媒體功能來檢測設備

CSS 媒體功能和 JavaScript 段屬性都將檢測雙屏設備，但 JavaScript 屬性最好在沒有使用 CSS 時使用，當您在 Canvas2D 和 WebGL 中處理對象時可能會發生這種情況。例如，您正在開發的游戲可以同時利用兩個屏幕。

使用 CSSenv()變量

除了 CSS 媒體功能之外，還引入了六個新的 CSS 環境變量，以幫助開發人員計算顯示區域的幾何形狀，計算鉸鏈區域在被 Surface Duo 等物理硬件功能遮擋時的幾何形狀，以及它們還可用于幫助將內容放置在每個顯示區域的邊界內。

六個新的環境變量如下：

env(viewport-segment-width <x> <y>);
env(viewport-segment-height <x> <y>);
env(viewport-segment-top <x> <y>);
env(viewport-segment-left <x> <y>);
env(viewport-segment-bottom <x> <y>);
env(viewport-segment-right <x> <y>);

x和位置表示由分隔每個視口段的硬件功能創建的y二維網格，坐標0,0從左上段開始。

當您的設備處于垂直折疊姿勢且視口并排時，左側的視口段將由表示env(viewport-segment-width 0 0)，而右側的視口段將由表示env(viewport-segment-width 1 0)。如果您將設備轉換為水平折疊姿勢，視口堆疊，頂部將由表示env(viewport-segment-height 0 0)，底部視口由表示env(viewport-segment-height 0 1)。

使用env(viewport-segment-width)andenv(viewport-segment-width)時，除了索引之外，我們還可以設置一個后備值，如下所示：

env(viewport-segment-width 0 0, 100%);

但是這個額外的后備值是可選的，由作者自行決定，如果他們想包含它。

計算鉸鏈寬度

當您的設備的鉸鏈被硬件功能遮擋時，您可以使用提供的環境變量來計算它。

我們可以使用環境變量計算設備鉸鏈。

在我們的示例中，我們有一個處于垂直姿勢的設備，并且想要找到鉸鏈寬度，這樣就不會遮擋任何內容。我們將從左顯示器的右視口段中減去右顯示器的左視口段：

calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));

使用 CSSenv()變量放置內容

我們可以使用 CSS 環境變量在顯示區域邊界內放置內容，如果您想將內容直接放置在鉸鏈或折疊處，這些特別有用。

在下面的示例中，我們將在左側第一個顯示區域的鉸鏈上直接放置圖像。該區域是視口的右側部分，因此我們將使用viewport-segment-right以下代碼放置它：

img {
  max-width: 400px;
}

@media (horizontal-viewport-segments: 2) {
  img {
      position: absolute;
      left: env(viewport-segment-right 0 0);
  }
}

如果我們在 Surface Duo 模式下在 Edge 開發人員工具中模擬我們的屏幕，我們將獲得以下布局：

最初使用環境變量將圖像放置在我們的布局中會將其放置在錯誤的顯示區域中。

這不是我們想要的。圖像應位于左側的顯示區域中。

因為圖像是使用屬性絕對定位的left，所以圖像的左邊緣最終與viewport-segment-right顯示區域對齊。

然后，我們需要從環境變量中減去圖像的寬度，以使圖像與正確的鉸鏈邊緣對齊：

img {
   max-width: 400px;
}

@media (horizontal-viewport-segments: 2) {
   img {
       position: absolute;
       left: calc(env(viewport-segment-right 0 0) - 400px);
  }
}

從視口段中減去圖像寬度會將其沿左側顯示中的鉸鏈放置。

現在我們將圖像放置在我們想要的位置。有關如何沿鉸鏈對齊項目的其他示例，您可以查看這個簡單的盒子演示。打開Edge Developer Tools>Device Emulation然后選擇Surface Duo并確保您Duo emulation處于校正方向姿勢。

把它們放在一起：讓我們構建一個適應雙屏設備的食譜頁面

作為一個在做飯時經常使用手機的人，當我在我的雙屏設備上時會適應的食譜網站會非常有幫助。讓我們來看看如何考慮為它調整一個單獨的食譜頁面。

我想考慮我將如何分塊我的主要內容。通常情況下，我至少會看到食譜標題、制作的份量、烹飪需要多長時間、一張或多張圖片、配料以及制作菜肴的步驟。

當我畫出我的線框時，我得到以下信息：

桌面上食譜頁面的標準布局

我希望我的標題和食譜詳細信息在最頂部，然后是一個占據整個內容寬度的圖像，然后是成分列表和食譜步驟。我不想堆疊后兩個內容組，因為如果我堆疊它們，成分列表的右側會有很多空白，所以我希望步驟坐在成分旁邊，給我兩列圖片下方。

用于布局的 CSS 網格或 FLEXBOX？

我知道我想如何在普通桌面屏幕上布置這個食譜，并且有多種方法可以對這個布局進行編碼和對內容進行分組，但我如何對其進行分組，以及我想在雙屏上實現什么布局在我編碼之前需要考慮設備。根據我為桌面視圖所做的草圖，我可以使用 flexbox 和 CSS Grid 的組合來實現我想要的布局，我將成分和步驟分組到一個 flex 容器中。但是讓我勾勒一下我希望我的頁面如何在雙屏上顯示。

垂直折疊位置的可折疊設備上的理想布局通過顯示屏將內容分開，因此不會被鉸鏈遮擋。

如果我想在布局上有更大的靈活性，那么我不能將我的成分和步驟分組到一個 flex 容器中，否則，無論圖像沒有進入哪一列，都會有很大的空白。

如果我只在這個布局中使用 flexbox，它會產生一些我想避免亂用的間距。

添加我們的內容

我將在桌面和雙屏布局中只使用 CSS Grid。所以，讓我們構建我們的內容。

<main>
  <section class="recipe">
      <div class="recipe-meta">
          … <!—Contains our recipe title, yield and servings -->
      </div>
      <img src="imgs/pasta.jpg" alt="Pasta carbonara photographed from above on a rustic plate" />
      <div class="recipe-details__ingredients">
          …<!— Contains our ingredients list -->
      </div>
      <div class="recipe-details__preparation">
          … <!— Contains our list of steps to put the ingredients together -->
      </div>
  </section>
</main>

接下來，讓我們構建頁面的結構。我要定義我的網格：我只想要三列，并且我希望它們是容器的相等部分。

.recipe {
display: grid;
grid-template-columns: repeat(3, 1fr);

接下來，我將定義我的行，并且我將使用grid-auto-rowswith minmax，這樣我的行是最小的，175px但可以增長到最大內容高度的最大值。

grid-auto-rows: minmax(175px, max-content);

然后我將添加更多屬性： my grip-gap、我的最大內容寬度和一個邊距，以使我的布局在頁面上居中。

grid-gap: 1rem;
max-width: 64rem;
margin: 0 auto;
}

然后，我將把我的內容放入我定義的網格中：

.recipe-meta {
   grid-column: 1 / 4;
}

.recipe-meta p {
   margin: 0;
}

img {
   width: 100%;
   grid-column: 1 / 4;
}

.recipe-details__ingredients {
   grid-row: 3;
}

.recipe-details__preparation {
   grid-column: 2 / 4;
   grid-row: 3;
}

這將根據我的草圖為我提供布局：

布局在桌面上按預期呈現

偉大的！但是我的雙屏布局呢？讓我們深入了解我們的horizontal-viewport媒體功能和雙屏網格。

使用媒體查詢和調整容器布局

首先，這是我現在在雙屏上的布局：

在沒有實現任何雙屏代碼的情況下，如果用戶想要將瀏覽器跨過兩個顯示器，那么頁面將是這樣的。

如果我們向下滾動：

如果用戶選擇跨越兩個顯示器，則內容會被鉸鏈遮擋。

不是很好。我們的內容被鉸鏈遮住了，所以讓我開始重新定義我的網格。

對于我的網格列，我仍將使用三列，但我希望一列占據左側的第一個視口段，另外兩列占據右側視口段，因此我將使用我的 CSS環境變量env(viewport-segment-width 0 0)告訴瀏覽器，對于我的第一列，我希望它占據第一個顯示區域的整個視口。

@media (horizontal-viewport-segments: 2) {

/* Body styles for smaller screens */
body {
       font: 1.3em/1.8 base, 'Playfair Display', serif;
       margin: 0;
  }

.recipe {
   grid-template-columns: env(viewport-segment-width 0 0 1fr 1fr;
   grid-template-rows: repeat(2, 175px) minmax(175px, max-content);
}

}

對于我的行，我希望在放置上更靈活一點，所以我將重復兩行175px，這是關于帶有配方標題、產量和時間信息的容器的高度，之后的行應該匹配我最初在網格中定義的內容。

如果我在 DevTools 中檢查我的設計，我可以看到我在配方容器上設置的width和margin最初將我想要與我的視口段對齊的網格線推到正確的視口段中。

添加我的代碼后，我的內容不再被遮擋，但仍需要一些間距調整。

要重置它，我將重置我的marginand max-width。

@media (horizontal-viewport-segments: 2) {

.recipe {
   grid-template-columns: env(viewport-segment-width 0 0) 1fr 1fr;
   grid-template-rows: repeat(2, 175px) minmax(175px, max-content);
   margin: 0;
   max-width: 100%;
}

}

重置我的邊距和填充會掩蓋右側顯示中的內容。

現在我要把我的內容放在網格中并調整我的布局。

.recipe-meta {
   grid-column: 1 / 2;
   padding: 0 2rem;
}

img {
   grid-column: 2 / 4;
   grid-row: 1 / 3;

   width: 100%;
   height: 100%;
   object-fit: cover;
   /* necessary to keep the image within the grid lines */
}

.recipe-details__ingredients {
   grid-row: 2;
   padding: 0 2rem;
}

.recipe-details__preparation {
   grid-column: 2 / 4;
   grid-row: 3;
   padding: 0 2rem 0 3rem;
}

我已經對內容應用了填充，除了我決定要跨越整個視口的圖像。對于圖像下方的內容，由于從物理鉸鏈下方開始的網格線的性質，我想添加額外的填充，因此它看起來左側的填充與其他帶有填充的項目相同。如果我不添加額外的，它會落得太靠近鉸鏈。因為我已經有一個 grid-gap1rem并且我想將 padding 加倍，所以我將添加3rem而不是4rem為我們提供雙屏設備上的最終布局：

我可以重新添加尺寸更合適的填充來顯示內容，因此它不會在帶有物理鉸鏈的設備上被遮擋。

只需對我們的 CSS 進行一些小的調整并使用其中一項新的媒體功能，我們就有了一個適應雙屏設備的布局。要查看體驗，請前往此處的 Edge 演示站點或基于 Chromium 的瀏覽器，然后打開瀏覽器開發人員工具以查看 Surface Duo 仿真。如果您在 Chrome 中打開該站點，請確保在下啟用了實驗性網絡平臺功能標志chrome://flags，以便演示正確顯示。

單屏響應式設計細節

為了確保我們考慮到小型單屏設備，我為手機布局選擇的代碼使用了 flexbox 并將所有內容放在一個列中：

@media (max-width: 48rem) {

   body {
       font: 1.3em/1.8 base, 'Playfair Display', serif;
  }

   .recipe-details {
       display: flex;
       flex-direction: column;
  }

}

API 瀏覽器可用性和無設備測試

默認情況下，這些雙屏 API 在 Microsoft Edge 和 Android 上的 Edge 中可用，從版本 97 開始。這些計劃很快就會出現在其他 Chromium 瀏覽器中，但具體時間尚未確定。要在 Chrome 中啟用這些 API，請轉到chrome://flags并啟用實驗性網絡平臺功能。

雖然這些是相對較新的設備，但許多現在已經進入第二代和第三代，因此公司正在投資它們。如果您無法使用物理設備，最好的測試方法是使用瀏覽器開發工具。我已經在仿真工具和 Surface Duo 上測試了我的網站，Duo 的仿真工具似乎是相同的。我的設計在設備上的外觀與在 DevTools 中的外觀相同。它使構建和設計雙屏設備就像開發桌面和單屏移動設備一樣容易。

如果您使用的是不支持這些 API 的桌面或設備，則可以為 Visual Viewport Segments 屬性提供一個 polyfill。CSS 媒體查詢沒有 API。目前，市場上的雙屏設備都是基于安卓的，這些API計劃在安卓上可用的基于Chromium的瀏覽器中。

如果可折疊設備上的瀏覽器不支持這些功能，您可以使用 polyfill 或確保您的網站在小單屏上仍能很好地呈現，因為用戶可以靈活選擇如何在雙屏上顯示網站屏幕設備。他們可以跨兩個顯示器跨越一個網站，或者他們可以選擇讓它跨一個顯示器，如果他們選擇后者，它將像在平板電腦或手機上一樣顯示。即使您的網站沒有雙屏實現，用戶仍然可以選擇單顯示視圖。雙屏 API 提供了一種方法來逐步增強擁有設備的用戶的體驗。

結束

雙屏設備只是響應式設計的下一個發展方向。如果您有 PWA 或網站，可用的 API 可以無縫集成到您現有的代碼庫中。還有其他方法可以為雙屏設備構建應用程序，您可以在Surface Duo 文檔https://docs.microsoft.com/en-us/dual-screen/中查看這些方法。這是在網絡上進行布局的激動人心的時刻，雙屏提供了獲得更多創意的機會。

為幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端項目研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業項目開發，云服務器部署上線，從入門到精通

PC端項目開發（1個）
移動WebApp開發（2個）
多端響應式開發（1個）

共4大完整的項目開發！一行一行代碼帶領實踐開發，實際企業開發怎么做我們就是怎么做。從學習一開始就進入工作狀態，省得浪費時間。

從學習一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠項目的開發標準和設計規范，命名規范，項目代碼規范，SEO優化規范

從藍湖UI設計稿到 PC端，移動端，多端響應式開發項目開發

真機調試，云服務部署上線；
Linux環境下的 Nginx 部署，Nginx 性能優化；
Gzip 壓縮，HTTPS 加密協議，域名服務器備案，解析；
企業項目域名跳轉的終極解決方案，多網站、多系統部署；
使用使用 Git 在線項目部署；

這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+項目資料素材等。只為實力寵粉，真正一次掌握企業項目開發必備技能，不走彎路！

過程中【不涉及】任何費用和利益，非誠勿擾。

如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰學習計劃，來自！老師會邀請你進入學習，并給你發放相關資料。

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

生命是不倒行的

也不與昨日一同停留

- 2024.04.08 -

隨著現代網頁設計的不斷演進，傳統的布局方式已經逐漸不能滿足設計師和開發者們對于高效、靈活且強大布局系統的追求。而CSS Grid網格布局，正是在這樣的背景下應運而生的。

今天，我們就來深入探討CSS Grid布局的魅力所在，帶你解鎖這項強大的設計工具，讓網頁布局變得更加簡單和高效。

一、什么是CSS Grid布局？

CSS Grid布局，簡稱為Grid，是CSS的一個二維布局系統，它能夠處理行和列，使得網頁布局變得更加直觀和強大。與傳統的布局方式相比，Grid能夠輕松實現復雜的頁面結構，而無需繁瑣的浮動、定位或是使用多個嵌套容器。

Grid網格布局是一種基于網格的布局系統，它允許我們通過定義行和列的大小、位置和排列方式來創建復雜的網頁布局。

這與之前講到的flex一維布局不相同。

設置display:grid/inline-grid的元素就是網格布局容器，這樣就能觸發瀏覽器渲染引擎的網格布局算法。

<div>
<div class="item item-1">
<p></p >
</div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>

上述代碼實例中，.container元素就是網格布局容器，.item元素就是網格的項目，由于網格元素只能是容器的頂層子元素，所以p元素并不是網格元素。

二、Grid的基本概念

首先，我們來了解一下CSS Grid布局的核心概念：

容器（Container）：

設置了display: grid;的元素成為容器。它是由一組水平線和垂直線交叉構成，就如同我們所在的地區是由小區和各個路構成。

項目（Item）：

容器內的直接子元素，稱為項目。

網格線（Grid Lines）：

劃分行和列的線條，可以想象成坐標軸。正常情況下n行會有n+1根橫向網格線，m列有m+1根縱向網格線。比如田字就好像是一個三條水平線和三條垂直線構成的網格元素。

上圖是一個 2 x 3 的網格，共有3根水平網格線和4根垂直網格線。

行：

即兩個水平網格線之間的空間，也就是水平軌道，就好比我們面朝北邊東西方向橫向排列的樓房稱為行。

列：

即兩個垂直網格線之間的空間，也就是垂直軌道，也就是南北方向排列的樓房。

單元格：

由水平線和垂直線交叉構成的每個區域稱為單元格，網絡單元格是CSS網格中的最小單元。也就是說東西和南北方向的路交叉后劃分出來的土地區域。

網格軌道（Grid Tracks）：

兩條相鄰網格線之間的空間。

網格區域（Grid Area）：

四條網格線圍成的空間，可以是行或列。本質上，網格區域一定是矩形的。例如，不可能創建T形或L形的網格區域。

三、Grid的主要屬性

CSS Grid網格布局的主要屬性包括：

display：設置元素為網格容器或網格項。例如，display: grid; 將元素設置為網格容器，而 display: grid-item; 將元素設置為網格項。

grid-template-columns 和 grid-template-rows：用于定義網格的列和行的大小。
grid-column-gap 和 grid-row-gap：用于定義網格的列和行的間距。
grid-template-areas：用于定義命名區域，以便在網格中引用。
grid-auto-flow：用于控制網格項的排列方式，可以是行（row）或列（column）。
grid-auto-columns 和 grid-auto-rows：用于定義自動生成的列和行的大小。
grid-column-start、grid-column-end、grid-row-start 和 grid-row-end：用于定義網格項的位置。
justify-items、align-items 和 place-items：用于對齊網格項。
grid-template：一個復合屬性，用于一次性定義多個網格布局屬性。

下面將詳細介紹這些屬性的概念及作用：

3.1 display

通過給元素設置：display:grid | inline-grid，可以讓一個元素變成網格布局元素。

語法：

display: grid | inline-grid;

display: grid：表示把元素定義為塊級網格元素，單獨占一行;
display:inline-grid：表示把元素定義為行內塊級網格元素，可以和其他塊級元素在同一行。

3.2 grid-template-columns和grid-template-rows

grid-template-columns和grid-template-rows：用于定義網格的列和行的大小。

grid-template-columns 屬性設置列寬
grid-template-rows 屬性設置行高

.wrapper {
display: grid;
/* 聲明了三列，寬度分別為 200px 200px 200px */
grid-template-columns: 200px 200px 200px;
grid-gap: 5px;
/* 聲明了兩行，行高分別為 50px 50px */
grid-template-rows: 50px 50px;
}

以上表示固定列寬為 200px 200px 200px，行高為 50px 50px。

上述代碼可以看到重復寫單元格寬高，我們也可以通過使用repeat()函數來簡寫重復的值。

第一個參數是重復的次數
第二個參數是重復的值

所以上述代碼可以簡寫成：

.wrapper {
display: grid;
grid-template-columns: repeat(3,200px);
grid-gap: 5px;
grid-template-rows:repeat(2,50px);
}

除了上述的repeact關鍵字，還有：

auto-fill：表示自動填充，讓一行（或者一列）中盡可能的容納更多的單元格。

grid-template-columns: repeat(auto-fill, 200px)

表示列寬是 200 px，但列的數量是不固定的，只要瀏覽器能夠容納得下，就可以放置元素。

fr：片段，為了方便表示比例關系。

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

表示第一個列寬設置為 200px，后面剩余的寬度分為兩部分，寬度分別為剩余寬度的 1/3 和 2/3。

minmax：產生一個長度范圍，表示長度就在這個范圍之中都可以應用到網格項目中。第一個參數就是最小值，第二個參數就是最大值。

minmax(100px, 1fr)

表示列寬不小于100px，不大于1fr。

auto：由瀏覽器自己決定長度。

grid-template-columns: 100px auto 100px

表示第一第三列為 100px，中間由瀏覽器決定長度。

3.3 grid-row-gap 屬性， grid-column-gap 屬性， grid-gap 屬性

grid-column-gap和grid-row-gap，用于定義網格的列間距和行間距。grid-gap 屬性是兩者的簡寫形式。

grid-row-gap: 10px 表示行間距是 10px
grid-column-gap: 20px 表示列間距是 20px
grid-gap: 10px 20px 等同上述兩個屬性

3.4 grid-auto-flow 屬性

grid-auto-flow，用于控制網格項的排列方式，可以是行（row）或列（column）。

劃分網格以后，容器的子元素會按照順序，自動放置在每一個網格。
順序就是由grid-auto-flow決定，默認為行，代表"先行后列"，即先填滿第一行，再開始放入第二行。

當修改成column后，放置變為如下：

3.5 justify-items 屬性， align-items 屬性， place-items 屬性

justify-items、align-items和place-items，用于定義網格項目的對齊方式。

justify-items 屬性設置單元格內容的水平位置（左中右）
align-items 屬性設置單元格的垂直位置（上中下）

.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}

屬性對應如下：

start：對齊單元格的起始邊緣
end：對齊單元格的結束邊緣
center：單元格內部居中
stretch：拉伸，占滿單元格的整個寬度（默認值）

place-items屬性是align-items屬性和justify-items屬性的合并簡寫形式。

3.6 justify-content 屬性， align-content 屬性， place-content 屬性

justify-content屬性是整個內容區域在容器里面的水平位置（左中右）
align-content屬性是整個內容區域的垂直位置（上中下）

.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

兩個屬性的寫法完全相同，都可以取下面這些值：

start - 對齊容器的起始邊框
end - 對齊容器的結束邊框
center - 容器內部居中

space-around - 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍。
space-between - 項目與項目的間隔相等，項目與容器邊框之間沒有間隔。
space-evenly - 項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔。
stretch - 項目大小沒有指定時，拉伸占據整個網格容器。

3.7 grid-auto-columns 屬性和 grid-auto-rows 屬性

有時候，一些項目的指定位置，在現有網格的外部，就會產生顯示網格和隱式網格。

比如網格只有3列，但是某一個項目指定在第5行。這時，瀏覽器會自動生成多余的網格，以便放置項目。超出的部分就是隱式網格。

而grid-auto-rows與grid-auto-columns就是專門用于指定隱式網格的寬高。

3.8 grid-column-start 屬性、grid-column-end 屬性、grid-row-start 屬性以及grid-row-end 屬性

指定網格項目所在的四個邊框，分別定位在哪根網格線，從而指定項目的位置。

grid-column-start 屬性：左邊框所在的垂直網格線
grid-column-end 屬性：右邊框所在的垂直網格線
grid-row-start 屬性：上邊框所在的水平網格線
grid-row-end 屬性：下邊框所在的水平網格線

<style>
#container{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
</style>

<div id="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>

通過設置grid-column屬性，指定1號項目的左邊框是第二根垂直網格線，右邊框是第四根垂直網格線。

3.9 grid-area 屬性

grid-area 屬性指定項目放在哪一個區域。

.item-1 {
grid-area: e;
}

意思為將1號項目位于e區域

grid-area屬性一般與上述講到的grid-template-areas搭配使用。

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想

3.10 justify-self 屬性、align-self 屬性以及 place-self 屬性

justify-self屬性設置單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用于單個項目。

align-self屬性設置單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是只作用于單個項目。

.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}

這兩個屬性都可以取下面四個值。

start：對齊單元格的起始邊緣。
end：對齊單元格的結束邊緣。
center：單元格內部居中。
stretch：拉伸，占滿單元格的整個寬度（默認值）

四、Grid網格布局應用場景

CSS Grid網格布局的應用場景非常廣泛，包括但不限于：

1、創建復雜的網頁布局：

CSS Grid網格布局可以輕松創建出復雜的網頁布局，如多列布局、不規則布局等。

2、創建響應式設計：

CSS Grid網格布局可以輕松實現響應式設計，通過調整網格的大小和間距，可以適應不同的屏幕尺寸。

3、創建復雜的組件布局：

CSS Grid網格布局也可以用于創建復雜的組件布局，如卡片布局、輪播圖布局等。

總的來說，CSS Grid網格布局是一種強大的布局工具，可以幫助網頁設計者輕松創建出各種復雜的網頁布局。

CSS Grid布局為我們提供了一個全新的視角來思考頁面布局，它讓復雜布局的實現變得簡單明了。隨著瀏覽器支持度的提高，未來的網頁設計將更加靈活和富有創意。

掌握了CSS Grid布局，你就已經邁出了成為前端設計高手的重要一步。不斷實踐，不斷探索，你會發現更多Grid的神奇之處。

今天就先講到這里了，

更多前端開發基礎知識點擊文末閱讀原文查看哦！

記得關注【云端源想IT】一起學編程！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

在線咨詢

上一篇：Win10新版大手術：游戲玩家有福了
下一篇：html5可以做什么？學完html5可以找什么工作？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商