多个review类div无法按行排列，display: grid应设置在父容器还是子元素

解决方案 #

display: grid属性需要设置在三个评论div的共同父容器上：Grid布局的规则是，设置了display: grid的元素为网格容器，它的直接子元素会自动成为网格项，由容器的grid相关属性控制排列规则。如果把该属性加在单个review元素上，只会控制单个评论内部的元素布局，无法实现三个评论的整体排列效果。

操作步骤 #

1. 先修改HTML结构，给三个评论新增共同的父容器：

<div class="reviews-wrapper">
    <div class="review1">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus vitae velit at. Quam animi qui sed delectus harum dignissimos distinctio. Ducimus, assumenda explicabo vero earum deserunt quisquam ut quo officiis.</p>
    </div>
    <div class="review2">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus vitae velit at. Quam animi qui sed delectus harum dignissimos distinctio. Ducimus, assumenda explicabo vero earum deserunt quisquam ut quo officiis.</p>
    </div>
    <div class="review3">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus vitae velit at. Quam animi qui sed delectus harum dignissimos distinctio. Ducimus, assumenda explicabo vero earum deserunt quisquam ut quo officiis.</p>
    </div>
</div>

2. 给父容器添加Grid相关CSS：

• 如果需要三个评论横向并排展示在同一行：

.reviews-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三个评论三等分父容器宽度 */
  gap: 24px; /* 评论之间的间距，可根据需求调整 */
}

• 如果需要每个评论单独占一行、纵向按顺序排列：

.reviews-wrapper {
  display: grid;
  gap: 16px; /* 评论上下间距，可根据需求调整 */
}
/* Grid布局默认就是单列排列，不需要额外设置列属性 */

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