CSS Grid实现聊天消息布局的对齐与尺寸适配问题

需要修改.messages section.left和.messages section.right的grid布局配置，完整修改后的CSS代码如下：

/* 左侧收到的消息布局 */
.messages section.left{
  display: grid;
  grid-template-columns: 45px minmax(auto, 60%) 1fr;
  grid-row-gap: 8px;
  grid-template-areas:
    "img msg ."
    "img reference .";
}
/* 右侧发送的消息布局 */
.messages section.right{
  display: grid;
  grid-template-columns: 1fr minmax(auto, 60%) 45px;
  grid-row-gap: 8px;
  grid-template-areas:
    ". msg img"
    ". reference img";
}
/* 可选优化：让消息内容贴列的对齐边，更贴合聊天展示习惯 */
.messages section.left .msg {
  justify-self: start;
}
.messages section.right .msg {
  justify-self: end;
}

原理说明 #

1. 右消息右对齐实现原理 #

原有配置中右消息仅设置了两列60% 45px，整个grid内容总宽度小于消息容器宽度时，grid默认左对齐内容，因此无法贴到容器右侧。
修改后新增了1fr宽度的左侧占位列，fr是grid布局的弹性比例单位，1fr会自动占满所有剩余的空白空间，直接把消息内容和头像挤到容器最右侧，实现右对齐效果。

2. 短消息自适应宽度实现原理 #

原有配置中消息列是固定的60%宽度，不管内容多少都会占满60%的容器宽度，导致短消息气泡过大。
改用minmax(auto, 60%)配置消息列宽度后：

• 消息内容长度小于容器60%时，列宽自动匹配内容宽度，气泡和文字大小适配
• 消息内容长度超过容器60%时，列宽最大限制为60%，内容自动换行，避免单条消息过宽影响阅读

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