CSS 网格列比内容宽

Question

为什么当我将 svg 图像放置在带有 auto 的网格列中时，网格列的宽度似乎是任意的。我怎样才能让网格列适合图像，让 div 填充空间？

代码如下：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

header {
  display: grid;
  grid-template-columns: auto 1fr;
  background-color: green;
  padding: 1rem;
}

img {
  width: 50%;
  background-color: pink;
}

div {
  background-color: red;
}

nav {
  background-color: yellow;
  grid-column: span 2;
}

<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>

这就是第一个建议的样子，不幸的是没有解决...

Answer 1

我不确定我遇到了真正的问题，但是...... 尝试在页眉中使用：margin: 0,

Answer 2

如果您将图像更改为

display: block

，网格将适合图像大小，

<div>

将占据其余空间。

body {
  margin: 0;
}

header {
  display: grid;
  grid-template-columns: auto 1fr;
  background-color: green;
  padding: 1rem;
}

img {
  display: block;
  background-color: pink;
  grid-column: 1;
  grid-row: 1;
}

div {
  background-color: red;
  grid-column: 2;
  grid-row: 1;
}

nav {
  background-color: yellow;
  grid-column: span 2;
  grid-row: 2;
}

<header>
  <img width="288" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjQgNDEzLjI4Ij48cmVjdCB4PSIxOCIgeT0iMTguMTIiIHdpZHRoPSIyODgiIGhlaWdodD0iMzI0IiBmaWxsPSJibHVlIi8+PC9zdmc+">
  <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>