无法创建包含SVG图片的响应式Grid布局区域

你的问题出在Grid列的定义上：grid-template-columns: auto 1fr里的auto列会优先根据内容（也就是SVG图片）的固有尺寸计算宽度，导致你给图片设置的min-width和max-width无法完全生效，进而出现Grid区域宽度异常的情况。

修改方案 #

调整Grid列的宽度规则，直接给第一列设定伸缩范围，同时简化图片的样式设置：

修改后的CSS #

* {
    box-sizing: border-box;
}
body {
    margin: 0;
}

header {
    display: grid;
    /* 直接用clamp定义第一列的宽度范围：最小12rem，最大25vw，中间自适应 */
    grid-template-columns: clamp(12rem, 25vw, 25vw) 1fr;
    background-color: green;
    padding: 1rem;
    gap: 1rem; /* 可选：给列之间加间距，优化视觉 */
}

img {
    width: 100%;
    height: auto; /* 保持SVG的宽高比 */
    background-color: pink;
}

div {
    background-color: red;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 让文字垂直居中，可选优化 */
}

nav {
    background-color: yellow;
    grid-column: span 2;
    padding: 0.5rem; /* 可选优化 */
}

对应的HTML（无需修改，保持原样即可） #

<header>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 324 413.28'%3E%3Crect class='655de5e2-44d3-4b5a-ae63-e6e7ec799246' x='18' y='18.12' width='288' height='324' fill='blue'/%3E%3C/svg%3E">
  <div>
    <h1>Heading</h1>
    <p>Text Line 1</p>
    <p>Text Line 2</p>
    <p>Text Line 3</p>
  </div>
  <nav>
    <a href="#">Menu Item 1</a>
    <a href="#">Menu Item 2</a>
    <a href="#">Menu Item 3</a>
    <a href="#">Menu Item 4</a>
    <a href="#">Menu Item 5</a>
    <a href="#">Menu Item 6</a>
  </nav>
</header>

关键修改说明 #

1. Grid列定义：用clamp(12rem, 25vw, 25vw)替代auto，直接锁定第一列的宽度范围——当视口足够大时，列宽最大为25vw；当视口缩小到12rem对应的宽度时，列宽不再缩小，保证图片不会过小。第二列的1fr会自动占据剩余的可用空间。
2. 图片样式：只保留width:100%和height:auto，让图片完全填充Grid列的宽度，同时保持SVG的原始宽高比，避免变形。
3. 可选优化：添加gap和文字居中样式，提升布局的美观度。

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