具有纵横比单元格以填充高度的 CSS 网格答案

【问题标题】：CSS grid with aspect-ratio cells to fill height具有纵横比单元格以填充高度的 CSS 网格
【发布时间】：2021-12-02 06:00:09
【问题描述】：

我想创建一个具有固定大小 (28x20) 网格的 css 网格，该网格填充所有可用高度，同时保持单元格的纵横比相同 (1/1)。

请参见下面的简化示例。理想情况下，这个 3x3 网格将填充高度并在右侧留出空白空间，但它会填充宽度并创建一个垂直滚动条。

这只适用于最新版本的 Chromium（电子应用）

建议？

.ctnr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
  height: 100%;
  overflow:hidden;
}


.cell {
  background: orange;
  aspect-ratio:1;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

<div class="ctnr">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>

【问题讨论】：

如果您希望您的网格是面向列的，请使用grid-auto-flow: column;
这不会打破固定尺寸的要求吗？例如。如果我将其应用于上面的示例而不是网格模板，它将在一列上布置所有 9 个正方形
它不是网格模板的替代品，但应该添加到您已有的样式之外。话虽如此，它并不能解决您的尺寸问题

标签： html css css-grid aspect-ratio

【解决方案1】：

我尝试了一些想法。我的解决方案可能并不完美，但也许会对您有所帮助。您可以在网格中使用vh 作为调整大小的基础。因此，如果我们需要每列 3 个方格，我们可以为列和行设置 33vh。还要添加grid-auto-flow: column; 使其面向列。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 100vh;
  display: grid;
  gap: 1px;
  /* Maybe use something like calc(100vh / 3 - 1px) for more precise calculation */
  grid-template-columns: repeat(auto-fill, 33vh);
  grid-template-rows: repeat(auto-fill, 33vh);
  grid-auto-flow: column;
}

.cell {
  background-color: #121212;
}

<div class="container">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

【讨论】：

【解决方案2】：

使用 grid-template-columns: repeat( auto-fit, minmax(250px, 300px) ); 并更改值以满足您的需求

【讨论】：

这是不可行的，因为窗口必须可调整大小而网格元素不会溢出高度。这仅将宽度和高度限制在一个大小范围内。使窗口太大，网格下会有不受欢迎的空间。让窗口太小，网格元素又会溢出高度
您是否尝试过减小最小值并增大最大值？