css - CSS-Grid: 网格模板行: minmax(0, min-content); 为什么这行得通？

Question

我正在寻找以下 css-grid 设置的解释：

CSS-Grid：三列，两行，中间列跨越两行

  |-------------|-----------|-----------|

  |  the-post-  |           |           |

  |  thumbnail  |           |     .     |

  |             |           |           |

  |-------------|   content |-----------|

  |  navigation |           |           |

  |             |           |     .     |

  |             |           |           |

  |-------------|-----------|-----------|

  

将 grid-template-rows 设置为“min-content, auto”（或 max-content, auto）时，左上角单元格的高度不会调整为图像高度（可能因所选图像和视口而异宽度）。似乎剩余高度（第2列的总高度减去图像高度）均匀分布到第1列中的两个单元格（例如单元格1：图像高度加上剩余高度的1/2，单元格2：剩余高度的1/2 )

但是当使用 grid-template-rows: minmax(0, min-content); （注意：没有第二个值，也适用于 minmax(0,max-content)）单元格 1 的高度调整为图像高度，但现在图像高度似乎已添加到第 2 列高度。

第二个选项符合我的需要，但它实际上是有效的代码吗？

而且：我真的不明白为什么会这样。有人可以帮我解释一下吗？

代码笔： https ://codepen.io/hmbgbw/pen/vYxWoKr

body {
  background: ivory;
}

h1 {
  font: bold 2em/1.3 sans-serif;
}

p {
  font: 1em/1.5 sans-serif;
  padding-bottom: 1em;
}

pre {
  font-family: monospace;
}

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

.the-post-thumbnail {
  grid-area: the-post-thumbnail;
  border: 1px solid green;
}

.navigation {
  grid-area: navigation;
  border: 1px solid red;
}

.content {
  grid-area: content;
  border: 1px solid blue;
}

.grid-container {
  display: grid;
  grid-template-columns: 2fr 4fr 4fr;
  grid-template-rows: minmax(0, min-content);
  /*grid-template-rows: min-content, auto;*/
  /*grid-template-rows: max-content, auto;*/
  grid-template-areas: "the-post-thumbnail content ." "navigation content .";
}

<div class="grid-container">
  <div class="navigation">
    Navigation
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus aspernatur accusantium natus optio, fugit beatae nostrum porro vitae tempore quae architecto praesentium, enim numquam amet eum quidem explicabo ut odio?</p>
  </div>
  <div class="the-post-thumbnail">
    <img src="https://placekitten.com/g/600/300">
  </div>

  <div class="content">
    <div class="the-title">
      <h1>CSS Grid row-height</h1>
    </div>
    <d class="the-content">
      <p>
        I’m looking for an explanation for following css-grid setting:</p>
      <p>CSS-Grid: three columns, two rows, middle column spans over the two rows</p>
      <pre>
      |-------------|-----------|-----------|<br>
      |  the-post-  |           |           |<br>
      |  thumbnail  |           |     .     |<br>
      |             |           |           |<br>
      |-------------|   content |-----------|<br>
      |  navigation |           |           |<br>
      |             |           |     .     |<br>
      |             |           |           |<br>
      |-------------|-----------|-----------|<br>
      </pre>

      <p>When setting grid-template-rows to “min-content, auto” (or max-content, auto), the height of the upper left cell doesn't adjust to the image height (may vary depending on the chosen image and the viewport width). It seems that the remaining height
        (total height of column 2 minus image height) is distributed evenly to the two cells in column 1 (e.g. cell 1: image height plus 1/2 of remaining height, cell 2: 1/2 of remaining height)</p>

      <p>But when using grid-template-rows: minmax(0, min-content); (note: without a second value, works also with minmax(0,max-content)) the height of cell 1 adjusts to the image height but now the image-heigth seems to be added to column 2 height.</p>
      <p>The second option fits my needs, but is it actually valid code?</p>
      <p>And: I don't really understand why this works. Can someone help me out with an explanation? </p>

  </div>
</div>

标签： csscss-grid