Html 为什么在添加文本时网格区域会调整大小

发布于01月16日

我一直在try 制作一个漂亮的新网站，结果发现了这一点--当添加内容时，其他div正在调整大小.

它应该看起来:一个矩形分为三分之二，其中一个是另一个的两倍大.

A rectangle divided into 2 thirds, with one double the size of the other

外观:一个被分成五分之二的矩形，其中一个的大小是另一个的四倍，其中包含文本:

A rectangle divided into 2 fifths, with one quadruple the size of the other containing text

我在网上发现的其他东西都不管用.下面的css代码，如果重要的话.

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

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

多亏了吴浩，已经修好了.(为发现目的而编辑) 我所需要的就是css grid-auto-columns: 1fr

推荐答案

您没有指定每一列的比例.如果您希望🟥区域占据2/3的空间，请try 在您的网格布局中添加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>