測試您的技能：多列

本技能測試的目的是評估您是否理解CSS 多列布局，包括column-count、column-width、column-gap、column-span 和 column-rule 屬性和值。您將完成三個使用您剛學過的材料不同元素的小任務。

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

如果您遇到困難，您可以透過我們的溝通渠道之一聯絡我們。

任務 1

在此任務中，我們希望您建立三列，每列之間有 50 畫素的間距。

最終結果應如下面的影像所示

Three columns of text

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

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

在此任務中，我們希望您建立最小寬度為 200 畫素的列。然後，在每列之間新增一個 5 畫素的灰色規則，確保規則邊緣和列內容之間有 10 畫素的間距。

最終結果應如下面的影像所示

Three columns of text with a grey rule between them.

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

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

在此任務中，我們希望您使包含標題和副標題的元素跨越所有列，使其看起來像下面的影像所示

Three columns of text with a heading and subheading spanning all three in the middle.

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

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