測試您的技能：網格

這項技能測試的目的是評估您是否理解網格和網格專案的行為。您將完成幾個使用您剛學到的材料不同元素的小任務。

注意：您可以在此頁面的互動式編輯器中或線上編輯器（如 CodePen、JSFiddle 或 Glitch）中嘗試解決方案。

如果您遇到困難，可以在我們的溝通渠道中聯絡我們。

任務 1

在此任務中，您應該建立一個網格，其中四個子元素將自動放置。網格應該有三個列，它們平均共享可用空間，列和行軌道之間有 20 畫素的間隙。之後，嘗試在具有 grid 類別的父容器內新增更多子容器，並檢視它們在預設情況下是如何表現的。

您的最終結果應該類似於下面的圖片

A three column grid with four items placed into it.

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點，以便在您自己的編輯器或線上編輯器中工作。

在此任務中，我們已經定義了一個網格。透過編輯兩個子元素的 CSS 規則，使其分別跨越多個網格軌道。第二個專案應與第一個專案重疊，如下面的圖片所示

A box with two items inside one overlaying the other.

嘗試更新下面的即時程式碼以重新建立完成的示例

附加問題

下載此任務的起點，以便在您自己的編輯器或線上編輯器中工作。

在此任務中，此網格中有四個直接子元素。起點使用自動放置顯示它們。使用 grid-area 和 grid-template-areas 屬性將專案佈置如下面的圖片所示

Four items displayed in a grid.

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點，以便在您自己的編輯器或線上編輯器中工作。

在此任務中，您需要同時使用網格佈局和彈性盒模型來重新建立下面的圖片中顯示的示例。列和行軌道之間的間隙應為 10 畫素。您無需對 HTML 進行任何更改即可實現此目的。

Two rows of cards, each with an image and a set of tags.

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點，以便在您自己的編輯器或線上編輯器中工作。