测试您的技能：多列

本技能测试的目的是评估您是否理解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.

尝试更新下面的实时代码以重新创建完成的示例

下载此任务的起点，以便在您自己的编辑器或在线编辑器中工作。