添加文本后CSS Grid网格区域异常缩放？布局问题求助

制作新网站时遇到CSS Grid布局异常：添加文本后，容器内的div元素尺寸比例偏离预期。

预期效果 #

容器被分为2/3和1/3的两部分，其中一部分尺寸是另一部分的两倍：

实际效果 #

添加文本后，容器被分成4/5和1/5的两部分，含文本的部分尺寸是另一部分的四倍：

相关CSS代码 #

/* basic styling above */
#container {
  display: grid;
  grid-template-areas:
    "🟥 🟥 🟨";
  height: 600px;
}

#work {
  grid-area: 🟥;
}
#thing {
  grid-area: 🟨;
}

解决方案 #

在容器的CSS规则中添加grid-auto-columns: 1fr即可修复该问题，修改后的容器代码如下：

#container {
  display: grid;
  grid-template-areas:
    "🟥 🟥 🟨";
  height: 600px;
  grid-auto-columns: 1fr;
}

内容的提问来源于stack exchange，提问作者ArchDud3