CSS Grid 列宽在 Firefox 和 Chrome 中表现不同

Question

我是 CSS Grid 的新手，在实现 Grid 布局时，我意识到 Firefox 和 Chrome 中的布局是不同的。我认为 Firefox 坚持使用“grid-template-columns”给出的网格宽度规范，而 chrome 会先根据内容调整自身，然后再查看网格宽度。

请在下面找到一支笔的链接，当您在 Firefox 和 chrome 中打开它时，结果看起来会有所不同。 这个问题如何排序？

https://codepen.io/alosies/pen/OoXvre?editors=1100

.gridWrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-areas: "palette questionDisplay questionDisplay questionDisplay ";
  grid-gap: 1rem;
}

.palette {
  grid-area: palette;
}

.questionDisplay {
  grid-area: questionDisplay;
}

.box{
  border: 1px solid grey;
}

<div class="gridWrapper">
  <div class="box palette">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nobis aut labore repellendus exercitationem ab, illo sapiente fuga est provident, quam corrupti molestiae sint quibusdam aperiam. Deleniti ratione dolorum debitis.div
    </div>
  <div class="box questionDisplay">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem amet</div>
  
</div>

Answer 1

如果您使用grid-template-areas 设置列顺序，则没有理由使用repeat 或auto-fit。这些功能用于管理轨道的重复模式。那不是你所拥有的。您已经使用grid-template-areas 创建了四列。

我认为正在发生的事情是您向浏览器发送混合消息，而它们的处理方式不同。 Firefox 和 Edge 以一种方式处理冲突。 Chrome 会做其他事情。

试试这个：

.gridWrapper {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
  grid-template-columns: minmax(150px, 1fr);  /* new */
  grid-template-areas: "palette questionDisplay questionDisplay questionDisplay ";
  grid-gap: 1rem;
}

.palette {
  grid-area: palette;
}

.questionDisplay {
  grid-area: questionDisplay;
}

.box {
  border: 1px solid grey;
}

<div class="gridWrapper">
  <div class="box palette">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nobis aut labore repellendus exercitationem ab, illo sapiente fuga est provident, quam corrupti molestiae sint quibusdam aperiam. Deleniti ratione dolorum debitis.div
  </div>
  <div class="box questionDisplay">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem amet</div>

</div>