前端 - Grid布局，设置了place-content:center，其子元素使用了auto-fit，此时列宽该如何计算？

Question

*　A使用grid对其子元素布局，并设置place-content:center

• 一个子元素D也使用grid，设置了grid-template-columns: repeat(auto-fit,minmax(100px,1fr)

<div class="A">      <h1>Hello world</h1>      <div class="B">          <div class="C">          <div class="D">sings isng isng saingsd</div>          <div class="D">sings isng isng saingsd</div>      </div>      <div class="C">sings isng isng saingsd ogijg oisg osijgsog</div></div></div>

.A {  display: grid;  place-content: center;}.B {  background: red;  display: grid;  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}

在线 https://codesandbox.io/p/devbox/grid-size-2-rnn4p5?file=%2Fin...

此时A上的网格的列宽该如何计算？

Answer 1

在CSS Grid布局中，repeat(auto-fit, minmax(100px, 1fr)) 的行为会根据可用空间自动调整网格的列数。minmax 函数确保每列至少有100px，最多占据可用空间的等份(1fr)。

当你使用 repeat(auto-fit, minmax(100px, 1fr))，这意味着网格列数会自动适应，每列至少100px宽，如果可用空间允许，则每列可以扩展到等份(1fr)。

place-content: center; 会使网格的所有内容居中。但是，这并不影响网格的列数或每列的宽度。

因此，A上的网格的列宽会根据其子元素D的内容自动调整。例如，如果D的内容少于3列，那么只有一列，如果内容超过3列但少于4列，那么有3列，以此类推。每列的宽度至少为100px，如果可用空间允许，则每列可以扩展到等份(1fr)。

然而，具体结果可能还受到其他因素影响，比如浏览器的默认样式、其他CSS代码等。

注意：你的问题描述和代码中似乎缺少了一些内容，我假设你的问题是关于如何计算这种CSS Grid布局的列宽。如果你有其他问题或者需要关于其他内容的帮助，请提供更多信息。