I have a CSS grid in a 4x4 layout. Sections A, B, C, and D contain dynamic content: each one holds a button that a user can click to display an additional image. When this is done, I expect the sections to get larger. A, C, and D will extend indefinitely as new content is added. However, section B only extends as far down as the longest of (A, C, D). If I add enough content to B so that it is the longest column, B does not resize to be longer, but instead the extra content spills out the bottom of it. B only resizes to match the size of A, C, or D as they extend past it.

In my ideal scenario, as new content would be added to B, it would continue to grow with that content. The only difference I can see is that B crosses two rows on my grid, while A, C, and D are each confined to one row.

How can I make B grow with the content?

main {
  display: grid;
  width: 800px;
  height: 1460px;
  grid-gap: 4px;
  grid-template-columns: 240px 10px 240px 260px;
  grid-template-rows: 230px 300px 1fr 1fr;
  grid-template-areas:"header header  header  header"
                      "  .      .       .     avatar"
                      "  A      A       A      B"
                      "  C      .       D      B"
}

CodePudding user response：

Try using grid-auto-rows with a fixed value. By default its set to "auto" however you can change that by including the following code:

main {
  display: grid;
  width: 800px;
  height: 1460px;
  grid-gap: 4px;
  grid-template-columns: 240px 10px 240px 260px;
  grid-template-rows: 230px 300px 1fr 1fr;
  grid-template-areas: "header header  header  header"
                       "  .      .       .     avatar"
                       "  A      A       A      B"
                       "  C      .       D      B";
  grid-auto-rows: 200px;
}

CodePudding user response：

So far what I've done is set the min-height property of B to its starting default, and setting height: fit-content. This solves my problem, but it feels like there should be a better way.