Css 卡片布局自定义贴子设计wordpress

我试图在wordpress中实现一个极简的网格/卡片布局。我是新开发人员，也是wordpress的新手，所以我很难达到这样的效果：

当前状态：

我用卡片尝试了一种boostrap方法，但没有成功（因为我希望与图像保持一致）

这是一种使用填充flex容器的图像标题创建相同高度的平铺的方法。最棘手的部分在容器上：

display: flex;
justify-content: space-between;
flex-wrap: wrap;

您只需使用边距和填充设置即可获得所需的排水沟


.tiles{
填充：0 20px；
背景：#eee；
显示器：flex；
证明内容：之间的空间；
柔性包装：包装；
}
.瓷砖{
宽度：钙（33.3%-20px）；
背景：#fff；
利润率：10px0；
}
.tile\uuu标题-图像{
高度：150像素；
背景位置：中心；
背景尺寸：封面；
背景色：#666；
}
.tile\u内容{
填充：10px；
}
.瓷砖含量h5{
边际：0.06像素；
}
.瓷砖含量ul{
列表样式：无；
填充：0；
保证金：0；
}
.tile___内容li{
显示：内联块；
字体大小：.8em；
颜色：#999；
}
.tile\uuu内容li:：之后{
内容：“—”
}
.tile\uu content li:最后一个孩子：：之后{
内容：“；
}

我的头衔在这里

标签1
标签2
标签3

我的头衔在这里

标签1
标签2
标签3

我的头衔在这里

标签1
标签2
标签3

我的头衔在这里

标签1
标签2
标签3

我的头衔在这里

标签1
标签2
标签3

我的头衔在这里

标签1
标签2
标签3

你的问题是什么？您有哪些具体问题需要帮助？我希望获得一些关于如何实现预期结果的指导。如何操作列以每行获得3。我还想控制图像大小以确保一致性。谢谢
display: flex;
justify-content: space-between;
flex-wrap: wrap;