CSS Grid布局下图标未按预期显示问题求助

你的问题核心在于：图标作为独立的网格项，默认会被分配到新的一行，所以才会出现在文本下方，还导致容器高度增加。

要实现图标右对齐悬浮在文本上方且不占用额外空间，只需要让图标和文本处于同一网格行即可，具体修改如下：

修改后的CSS代码 #

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 425px;
  background-color: salmon;
}

.message {
  grid-column: 1 / span 2; /* 简化写法，和原grid-column-start/end效果一致 */
}

.icon {
  grid-column: 2;
  grid-row: 1; /* 关键：让图标和文本处于同一行 */
  width: 20px;
  z-index: 10;
  justify-self: end;
  align-self: start; /* 可选：让图标和文本顶部对齐，可按需调整 */
}

完整示例代码 #

<div class="container">
    <div class="message">
This is a message that should span the cell and go under the icon
    </div>
    <img src="https://img.icons8.com/2266EE/search" class="icon" alt=""/>
</div>

这样修改后，图标会定位在文本所在行的右侧，悬浮在文本上方，不会额外占用容器高度，同时保持grid布局的动态宽度适配性。

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