CSS Grid响应式布局：auto宽度列宽于图片的异常问题

算力阿峰

2026-8-5

响应式CSS Grid特定尺寸下列宽异常问题

我搭建的响应式CSS Grid在特定尺寸下出现异常：在下方代码片段中，我期望图片在指定断点处占据宽度为auto的第一列，同时跨网格所有行。但在特定的网格高宽组合下，第一列宽度会意外超出图片实际宽度，导致图片左右出现多余空白，本该分配给第二列（宽度设为1fr）的空间被占用。将网格拉宽后，该问题会消失，第一列宽度会立即匹配图片宽度（外层div已添加resize属性方便测试）。

约束条件

图片禁止拉伸，高度需与网格高度一致，宽度按比例自动缩放
网格最小高度必须等于其父元素的100%

代码片段

CSS

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0;
  border-style: solid;
}

img {
  max-width: 100%;
  height: auto;
}

.flex {
  display: flex;
}
.grid {
  display: grid;
}
.h-full {
  height: 100%;
}
.h-min {
  height: -moz-min-content;
  height: min-content;
}
.max-h-full {
  max-height: 100%;
}
.max-h-fit {
  max-height: -moz-fit-content;
  max-height: fit-content;
}
.min-h-0 {
  min-height: 0px;
}
.w-full {
  width: 100%;
}
.w-\[20cqw\] {
  width: 20cqw;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.max-w-full {
  max-width: 100%;
}
.max-w-fit {
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.resize {
  resize: both;
}
.grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr;
}
.grid-rows-\[auto_auto_1fr_auto\] {
  grid-template-rows: auto auto 1fr auto;
}
.flex-col {
  flex-direction: column;
}
.justify-self-center {
  justify-self: center;
}
.overflow-auto {
  overflow: auto;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.border-4 {
  border-width: 4px;
}
.border {
  border-width: 1px;
}
.border-purple-800 {
  --tw-border-opacity: 1;
  border-color: rgb(107 33 168 / var(--tw-border-opacity));
}
.border-sky-500 {
  --tw-border-opacity: 1;
  border-color: rgb(14 165 233 / var(--tw-border-opacity));
}
.border-neutral-400 {
  --tw-border-opacity: 1;
  border-color: rgb(163 163 163 / var(--tw-border-opacity));
}
.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity));
}
.bg-purple-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
}
.p-3 {
  padding: 0.75rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-4 {
  padding: 1rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.\@container {
  container-type: inline-size;
}

@container (min-width: 20rem) {

  .\@xs\:row-span-full {
    grid-row: 1 / -1;
  }

  .\@xs\:h-\[min\(100%_20cqi\)\] {
    height: min(100% 20cqi);
  }

  .\@xs\:h-\[min\(100%\2c _20cqi\)\] {
    height: min(100%, 20cqi);
  }

  .\@xs\:w-\[20cqw\] {
    width: 20cqw;
  }

  .\@xs\:grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }

  .\@xs\:grid-rows-\[auto_1fr_auto\] {
    grid-template-rows: auto 1fr auto;
  }
}

HTML

<div
  class="resize overflow-auto border border-sky-500 p-2"
  style="width: 405px; height: 160px"
>
  <div class="flex h-full flex-col border border-green-500 @container">
    <h4>Example</h4>
    <div
      class="grid h-full min-h-0 grid-rows-[auto_auto_1fr_auto] rounded border border-neutral-400 @xs:grid-cols-[auto_1fr] @xs:grid-rows-[auto_1fr_auto]"
    >
      <img
        alt="300"
        src="https://via.placeholder.com/300"
        width="400"
        height="400"
        class="@xs:max-w-[min(100%,_20cqi) max-h-full min-h-0 w-fit max-w-full justify-self-center @xs:row-span-full"
      />
      <div>
        <div class="">Featured product</div>
        <div class="">Nutri Ninja Foodi 6L Multi Cooker</div>
      </div>
      <div class="">$299</div>
      <button
        class="rounded bg-purple-800 px-4 py-2 text-white"
      >
        Buy
      </button>
    </div>
  </div>
</div>