CSS网格-两列布局（标题和说明）

以下是我目前掌握的情况：

.card{
填充：1rem；
高度：自动；
}
.卡片{
最大宽度：640px；
保证金：0自动；
显示：网格；
栅隙：32px；
网格模板列：重复（自动拟合，最小值（300px，1fr））；
}
.cardTitle{
颜色：红色；
字体大小：32px；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
}
.卡片说明{
字号：18px；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
}
@介质（最小宽度：768px）{
.cardTitle{
文本对齐：右对齐；
}
.卡片说明{
文本对齐：左对齐；
}
}

标题一
描述：一位名叫洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum dolor sit amet）的妇女，是一位杰出的献祭者
标题二
描述：两种不同的颜色，一种是白色的，另一种是白色的
标题三
描述：三种不同的颜色，分别是：
标题四
描述：四种颜色的同色花，分别为蓝色和蓝色
标题五
描述：五种不同的颜色，分别是

您可以这样做：

仅使用

显示：网格，然后使用
边距底部
控制空间。