具有完美方形单元格的响应式网格布局答案

【问题标题】：Responsive grid layout with perfectly squared cells具有完美方形单元格的响应式网格布局
【发布时间】：2023-01-09 18:30:37
【问题描述】：

我有一个 <section> 元素，它不能大于 100vh，也不能大于 100vw。理想情况下，它应该遵循其父容器尺寸。

<section> 应该有一个使用 css 变量的网格布局； var(--cols, 56)和var(--rows, 32)

网格中的每个单元格必须是 1:1 的比例，这意味着单元格宽度必须始终 === 单元格高度。

如果视口（父元素）增长，<section> 元素应该增长，除非这使得单元格不是正方形。如果是这种情况，<section> 元素应该居中。因此，如果视口宽度变大而视口高度变小，<section> 将水平居中。但是如果视口高度变大而视口宽度变小，<section>元素就会垂直居中。

这是我到目前为止所拥有的：

<section #widgets>
  <ng-container *ngFor="let widget of widgetConfig">
    <ng-container [libTileContainer]="widget"></ng-container>
  </ng-container>
</section>

section {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(
      var(--cols, 56),
      calc(((100vw - (var(--cols, 56) * 5px) - 2rem) / (var(--cols, 56))))
    );
    grid-template-rows: repeat(
      var(--rows, 32), 
      calc(((100vw - (var(--cols, 56) * 5px) - 2rem) / (var(--cols, 56))))
    );
    max-width: 100%;
    max-height: 100%;
  }

这尊重细胞的方形性，但它会从它的父级中流出。计算也将只考虑视口宽度而不是高度。

我怎样才能达到我想要的？

【问题讨论】：

不确定它是否适用于网格单元，但您可以尝试使用 css aspect-ratio 使它们成为正方形
我试过在 section 元素的父元素上设置纵横比。这将修复部分宽度不溢出，但由于 cols 和 rows 是变量，我无法将其设置为固定比例。
哦，你的意思是在单元格本身上设置纵横比？是的，但细胞不一定是元素。而那些包含元素的元素通常会填充不止 1 列和行。

标签： html css

【解决方案1】：

要设置网格项的高度和宽度，您可以使用一种策略，该策略根据应该在可用空间内容纳多少列和行来计算高度和宽度，然后只在两个属性上使用两者中的较小者.

在这个演示中我稍微重构了一些选择：

我删除了列数的默认值以简化代码..无论如何它可以定义为其他自定义属性
我使用函数min 来确定哪一个在候选人的身高和宽度
我默认使用place-content来居中项目
我使用grid-auto-rows 来确定行的大小，因为它不是重要的是在这里告诉也有多少
我告诉div取他们容器的整个宽度和高度

*{
  box-sizing: border-box;
}

html, body{
  margin: 0;
}

section {
    
  --cols: 2;
  --rows: 3;
  --gap: 5px;
  --col-size: calc(((100vw - (var(--cols) * var(--gap))) / (var(--cols))));  
  --row-size: calc(((100vh - (var(--rows) * var(--gap))) / (var(--rows))));    
  --size: min(var(--col-size), var(--row-size));
  
  display: grid;
  place-content: center;
  gap: var(--gap);
  grid-template-columns: repeat( var(--cols), var(--size));
  /*grid-template-rows: repeat( var(--rows), var(--size));*/
  grid-auto-rows: var(--size);
  width: 100vw;
  height: 100vh;      
}

section{
  border: solid red;
}

section div {  
  height: 100%;
  width: 100%;
  
  border: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 5rem;
}

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

【讨论】：