在页面主体部分可以显示内容卡片列表，先设计一下这个内容列表的布局。

在 main 这个标签里面，添加一组 div，上面加上一个类，名字是 post-list，它里面的东西就是内容项目，可以添加一些空白的 div，表示这些内容项目。

然后在样式表里设计一下这个内容列表布局，用 .post-list 作为选择器写一段样式，把 display 设置成 grid，再用 grid-template-columns 划分一下网格，这里我们用一下 repeat 这个函数，重复的次数用 auto-fit 自动适应，重复的值可以用 minmax 这个函数，最小宽度是 320 像素，最大可以是 1fr。 再用 gap 添加点间隔，行与栏的间隔统一设置成 32 像素。

下面用 .post-list > div 作为选择器，设置一下列表里的内容项目的样式，把 background 设置成 --skeleton-object-background。再用一个 aspect-ratio 设置一下容器的显示比例，设置成 3 / 2 。

网格的 gap 可以改的少一点，设置成 24 像素。

观察

在浏览器观察一下这个内容卡片列表，调整一下浏览器窗口的宽度，每一行显示的内容项目的宽度还有数量都会有一些变化。

portrait

现在我希望有些内容项目可以变成竖版，在想要变成竖版的内容项目元素上添加一个特别的类，比如 portrait。

在样式表里，用 .post-list > .portrait 作为选择器写一段样式，用一下 grid-row 这个属性，值可以是 auto / span 2，意思就是让元素占用网格里的两行的空间。再把 aspect-ratio 设置成 2 / 3 。

然后写一段媒体查询，@media (min-width: 640px)，添加一段样式， .post-list > .portrait ，把 aspect-ratio 设置成 auto。

观察

在浏览器观察一下，内容项目的包装上添加了 portrait 这个类以后，它会占用两行的空间。