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

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'ed并且画布的大小是绝对的，那么main元素理论上应该不会影响计算的min-content高度。这不是宽度的情况，但不知何故，高度增加了4个额外的像素。

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

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

Answer 1

请给float:left帆布或增加main{height:300px}的高度，并给 canvas {height:100%}高度

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

问题描述投票：2回答：1

1个回答

最新问题

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

问题描述 投票：2回答：1

1个回答

最新问题

问题描述投票：2回答：1