- 主体页面要展示一个内容卡片列表。
- 创建一个新的布局设计，其中
main标签包含带有post list类的一组div表示内容项。 - 使用
post list类和CSS Grid布局来设计内容列表的外观，使用grid-template-columns和auto-fit来实现自动适应的响应式重复布局，将最小列宽设置为320像素，最大为1fr。 - 设置网格间距（
gap）为32像素，并为内容项的div定制样式，指定背景和宽高比（aspect-ratio）为3:2。 - 当调整浏览器宽度时，内容项的宽度和数量会相应变化。
- 为特定内容项定义一个
portrait类，当应用该类时，内容项会在网格中占用两行空间，并将宽高比改为2:3。 - 使用媒体查询（
@media）针对宽度至少为640像素的视口，为portrait类设置宽高比，使其在较大屏幕上显示不同的布局。