Why is my grid area resizing when I add text?

Issue

Been trying to make a fancy new website and came across this - the other divs are resizing when content is added.

How it should look: A rectangle divided into 2 thirds, with one double the size of the other.

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

Nothing else I found online works. CSS code below if it matters.

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

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

Already fixed thanks to Hao Wu. (Editing for discovery purposes) All I needed was css grid-auto-columns: 1fr

Solution

You didn't specify the proportion for each column. If you want the 🟥 area to take 2/3 of the space, try adding grid-auto-columns: 1fr to your grid layout. So all the columns are taking the equal spaces.

#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>

Answered By - Hao Wu