CSS Grid实现动态内容自适应行高且不拉伸固定侧边内容

可以仅通过CSS Grid实现需求，核心是让右侧固定高度元素脱离网格行的拉伸影响，具体修改如下：

修改后的代码 #

CSS #

.page {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(5, 16px); /* 保留初始5行的基础高度设置 */
  grid-auto-rows: auto; /* 让新增的行自动适应内容高度 */
  border: 1px solid blue;
}

.text {
  grid-row: 1 / auto;
  grid-column: 1 / 4;
  border: 2px solid red;
}

.description {
  grid-column: 4 / 5;
  grid-row: 1 / 5;
  border: 1px solid green;
  align-self: start; /* 关键：让元素在网格区域内顶部对齐，不被行高拉伸 */
  height: 80px; /* 固定高度：5行 × 16px/行 */
}

.description img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保证图片按比例填充容器，不变形 */
}

HTML #

<div class="page">
  <div class="text">
    Nam adipiscing. Aenean viverra rhoncus pede. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Donec posuere vulputate arcu. Fusce egestas elit eget lorem.

    Quisque rutrum. In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Nullam dictum felis eu pede mollis pretium. Maecenas egestas arcu quis ligula mattis placerat.

    Fusce pharetra convallis urna. Curabitur suscipit suscipit tellus. Vestibulum volutpat pretium libero. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.

    Fusce pharetra convallis urna. Curabitur suscipit suscipit tellus. Vestibulum volutpat pretium libero. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.
  </div>
  <div class="description">
    <img src="https://www.clker.com/cliparts/y/c/r/G/g/M/warning-md.png" alt='Warning clip art' />
  </div>
</div>

关键原理说明 #

• Grid布局默认会让跨多行的元素拉伸至网格行的总高度，这就是你之前右侧图片被拉伸的原因。
• align-self: start 强制右侧元素在其网格区域内顶部对齐，不再继承网格行的高度，配合固定的height: 80px，就能保持固定尺寸。
• 左侧文本区域的grid-row: 1 / auto会自动占据所需的网格行，grid-auto-rows: auto让新增的行高度自适应内容，不会影响右侧固定区域。

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