为什么当我添加文本时我的网格区域大小会调整？

Question

一直在尝试制作一个精美的新网站，并发现了这一点 - 添加内容时其他 div 正在调整大小。

它应该是什么样子：一个矩形分为三分之二，其中一个的大小是另一个的两倍。

看起来如何：一个矩形分为五分之二，其中一个矩形的大小是另一个矩形的四倍，其中包含文本：

我在网上找不到其他有用的东西。如果重要的话，下面的 CSS 代码。

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

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

Answer 1

您没有指定每列的比例。如果您希望

🟥

区域占据 2/3 的空间，请尝试将

grid-auto-columns: 1fr

添加到网格布局中。所以所有列都占用相等的空间。

#container {
    display: grid;
    grid-template-areas:
        "🟥 🟥 🟨"
    ;
    grid-auto-columns: 1fr;
    height: 600px;
}
#work {
    grid-area: 🟥;
    background-color: salmon;
}
#thing {
    grid-area: 🟨;
    background-color: steelblue;
}

<div id="container">
  <div id="work">
    <h1>Work.</h1>
    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
  </div>
  <div id="thing">
    <h1>Thing.</h1>
  </div>
</div>

Answer 2

网格中列的默认宽度为

auto

。这意味着网格列将根据需要扩展或收缩。

要进行 2:1 分割，您应该使用：

grid-template-columns: 2fr 1fr

，这会将列平均分割为 2 个分数和 1 个分数。

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1em;
}


/* For visualization purpose only */
.container > div {
  border: 2px dashed red;
  min-height: 50vh;
}

<div class="container">
  <div>2/3 block</div>
  <div>1/3 block</div>
</div>