如何实现Grid布局评论区长文本首行置顶其余换行排版

要实现你要的「长文本首行与用户名同排，换行后占满右侧区域」的效果，不用纠结复杂的Grid行列定位，调整一下结构和布局设置就能搞定：

修改后的CSS #

.grid {
  display: grid;
  grid-template-columns: 70px 1fr; /* 头像列固定宽度，右侧列自适应 */
  gap: 12px; /* 增加间距提升美观度 */
  align-items: start; /* 元素顶部对齐，避免头像居中错位 */
}

.profile-picture {
  width: 42px;
  height: 42px;
  background-color: #aaa;
  border-radius: 50%;
}

.comment-username {
  font-weight: 700;
  margin-right: 8px; /* 用户名和文本之间留间距 */
}

修改后的HTML #

<div class="grid">
  <div class="profile-picture"></div>
  <div class="comment-content">
    <span class="comment-username">Amogus</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi dolor est error aspernatur. Obcaecati fuga inventore ab cumque enim ipsam quisquam delectus ad, dolor numquam molestias necessitatibus ratione quis facere! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi dolor est error aspernatur. Obcaecati fuga inventore ab cumque enim ipsam quisquam delectus ad, dolor numquam molestias necessitatibus ratione quis facere!</span>
  </div>
</div>

原理说明 #

• 把Grid设置为两列，头像单独占第一列并垂直顶部对齐，避免长文本过多时头像被拉到中间位置。
• 用户名和评论文本放在同一个Grid单元格里，利用自然的文本流实现首行同排，文本换行后自动占满右侧整列，完全匹配你要的效果。

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