Question

我是网格的新手，我试图了解一些细胞大小的概念。

我的容器设置为display: grid，main元素位于min-content列/行所在的网格中。

.main-container {
  display: grid;
  grid-template-columns: 1fr min-content 1fr;
  grid-template-rows: 1fr min-content 1fr;
}

.main-container main {
  grid-column: span 1
  grid-column-start: 2
  grid-row: span 1
  grid-row-start: 2
}

canvas {
  width: 800px;
  height: 600px;
}

和html

<!-- page -->
<html>
...
<body>
  <div class="main-container">
    <main>
      <canvas />
    </main>
  </div>
</body>
</html>

codepen example

应用程序将围绕画布的发生，并且由于画布渲染中宽高比的性质，我希望中心网格单元符合画布的大小，而不是相反。

我希望由于main和canvas都是border-box并且画布的大小是绝对的，因此理论上应该main元素不影响计算的min-content高度。这不是宽度的情况，但不知何故，高度增加了4个额外的像素。

这些额外高度像素来自何处，以及如何确保它们不会出现

将main的高度明确设置为600px确实可以解决问题，但这是多余的信息，我预计会有一个不涉及硬编码高度绑定的解决方案。

Answer 1

请将float:left提供给画布，或者将高度添加到main{height:300px}，并将高度设为 canvas {height:100%}

CSS网格最小内容没有缩小到正确的大小

1 个答案: