Html Question posted in
Some basic documentation can be found here.

Html – Why is my grid area resizing when I add text?

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.

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:

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    The default width of a column in a grid is auto. That means the grid column will expand or shrink if needed.

    To have a 2:1 split you should use: grid-template-columns: 2fr 1fr which will split the columns equally in 2 fractions and 1 fraction.

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search