在我嘗試創建一個包含 svg 圖像的響應式網格區域時，我遇到了奇怪的行為，例如任意網格區域寬度，以及無法讓圖像增大或縮小到某個點而不停止。我得到的最接近的是：
* { box-sizing: border-box; } body { margin: 0; } header { display: grid; grid-template-columns: auto 1fr; background-color: green; padding: 1rem; } img { width: 100%; max-width: 25vw; min-width: 12rem; background-color: pink; } div { background-color: red; text-align: center; } nav { background-color: yellow; grid-column: span 2; } 
影像列的寬度不是任意的。
網格容器首先佈置結構。。然後正在佈置物品。
這表示當影像處於其自然寬度 (100%) 時，第一列的大小將會調整。
當項目以
寬度：50%呈現時，瀏覽器不會傳回並重新調整列的大小。所以列的大小不是任意的；這是圖像的自然寬度。
（這可以說是一個錯誤或 CSS 限制。）
請注意，當影像為全寬時，此問題不存在：
* { box-sizing: border-box; } body { margin: 0; } header { display: grid; grid-template-columns: auto 1fr; background-color: green; padding: 1rem; } img { width: 100%; background-color: pink; } div { background-color: red; } nav { background-color: yellow; grid-column: span 2; }當你嘗試
width: 150%時它會回來：* { box-sizing: border-box; } body { margin: 0; } header { display: grid; grid-template-columns: auto 1fr; background-color: green; padding: 1rem; } img { width: 150%; background-color: pink; } div { background-color: red; } nav { background-color: yellow; grid-column: span 2; }旁注
一般來說，在使用 CSS Grid 和 Flexbox 時，將圖像作為容器的子項並不是一個好主意。
換句話說，通常最好避免將影像用作網格或彈性項目。
不同瀏覽器之間有太多錯誤和渲染差異。
在許多情況下，只需將圖像放入
div中（使div成為網格項目）即可解決問題。避免將影像作為網格或彈性項目：