Grid布局遇到的问题: 尺寸计算陷入死循环了？
- 设置place-content: center，网格的列宽是该列元素最大宽度，需要计算每个子元素的宽度才可以计算出列宽，然后每个子元素的宽度拉伸到该列宽（justify-items: stretch)
- 当它的子元素的布局需要自身的宽度(拉伸后的宽度)，而自身的宽度需要计算列宽才能计算出来，这不就陷入死循环了吗？
就比如下面这个例子
<body>
<div class="A">
<h1>He</h1>
<div class="B">
<div class="C">singsuoiuoiuoiuoiuiouoiuiouoiuoiuoi ignsi sing isng saoigja oisag sings ignsi sing isng saoigja oisag </div>
<div class="C">sings ignsi sing isng saoigja oisag sings ignsi sing isng saoigja oisag </div>
</div>
</div>
</body>
.A {
display: grid;
width: 300px;
place-content: center;
}
.B {
display: grid;
grid-template-columns: repeat(auto-fit, 100px);
}
- A网格的列宽取决于
- h1的宽度，就是它的max-content的大小
- B的宽度，它是使用grid对其子元素布局，这里出现的auto-fit，尽量充满B的宽度，每个列网格宽度为100px，但是此时我们不知道B的宽度是多少，B的宽度应该被拉伸到列宽，而计算列宽又需要计算B的宽度
它的计算过程应该是什么样的？
代码: codesandbox
