CSS Grid布局文本重叠如何解决？怎样实现文本垂直对齐？

问题根源 #

1. 现有.character的网格布局仅定义了2个行区域（name、house），但JS渲染输出了1个标题+3个段落标签，所有段落都被指定到同一个house网格区域，多个元素堆叠在同一单元格自然会重叠
2. 给段落设置的margin-top: -18px进一步加剧了重叠效果

修改方案 #

不需要复杂的多行列网格定义，把左侧所有文本保留为自然流排列，仅用网格拆分左右两列即可，修改后的CSS如下：

.character {
    list-style-type: none;
    background-color: #111111;
    border-radius: 3px;
    padding: 10px 20px;
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center; /* 左右两列内容整体垂直居中 */
    text-align: left;
}

.character > h2 {
    margin: 0 0 10px 0; /* 标题底部留间距 */
    font-size: 20px;
}

.character > p {
    margin: 6px 0; /* 段落上下保留均匀间距 */
}

.character > img {
    max-height: 150px;
    margin-left: 15px;
    justify-self: end; /* 图片靠右对齐 */
}

修改后即可实现左侧文本从上到下依次排列、行间距均匀，右侧图片和左侧文本整体垂直居中的效果，不会出现重叠或对齐异常问题。

内容的提问来源于stack exchange，提问作者Dominick