HH123_3 2023-12-18 10:58 采纳率: 86.8%
浏览 9

Grid布局遇到的问题: 尺寸计算陷入死循环了?

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

  • 写回答

1条回答 默认 最新

  • 是悟能了 前端领域优质创作者 2023-12-25 11:17
    关注

    你的代码中,.A 和 .B 都被设置为了 CSS Grid 布局,.A 的内容被设置为居中,.B 的列宽被设置为自动适应,每列的宽度为 100px。

    问题可能出在 .B 的 grid-template-columns 属性上。repeat(auto-fit, 100px) 会创建尽可能多的 100px 宽的列,但是 .B 的父元素 .A 的宽度被设置为 300px,这可能会导致 .B 的内容溢出 .A。

    如果你希望 .B 的内容在 .A 内部自动换行,你可以将 grid-template-columns 的值改为 repeat(auto-fit, minmax(100px, 1fr))。这样,每列的最小宽度为 100px,最大宽度为可用空间的等份。

    
    ```css
    .B {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
    
    
    这样,当 .B 的宽度不足以容纳更多的 100px 宽的列时,列的宽度会自动缩小,并且内容会自动换行。
    
    另外,如果你希望 .A 的宽度能够自动适应内容的宽度,你可以将 .A 的 width 属性改为 max-content:
    
    
    ```css
    .A {
      display: grid;
      width: max-content;
      place-content: center;
    }
    
    

    这样,.A 的宽度会等于其内容的最大宽度,不会超过 300px。

    评论

报告相同问题?

问题事件

  • 创建了问题 12月18日

悬赏问题

  • ¥20 有偿,学生成绩信息管理系统
  • ¥15 Arduino电机和openmv连接异常
  • ¥15 Arcgis河网分级报错
  • ¥200 java+appium2.1+idea
  • ¥20 请帮我做一个EXE的去重TXT文本
  • ¥15 工价表引用工艺路线,应如何制作py和xml文件
  • ¥15 根据历史数据,推荐问题类型
  • ¥15 需要仿真图,简单的二阶系统实例
  • ¥15 stm32光控照明仿真
  • ¥15 使用人工智能的方法生成满足一定统计参数要求的随机数序列