Make grid area prefer to shrink

user_4928642 0
Viewed 160

I want left column to define the height of the block. The middle area of the right column should be:

  • if the first column is longer: as small as possible to make the second column having the same height as first one, but not longer then area content and not shorter then 40px.
  • otherwise: 40px long.

All conditions are written as the text of the areas in the following snippet:

main {
  display: grid;
  grid-template: auto min-content 1fr / 1fr 2fr;
  grid-gap: 20px;
  line-height: 20px;
}

section {
  background: silver;
}

.left {
  grid-row: 1 / -1;
}

.middle {
  background: antiquewhite;
  min-height: 40px;
  max-height: 160px;
  overflow: hidden;
}
0. Grid does not have a fixed height.
<main>
  <section contenteditable class="left">
    1. The left column should determine the preferred size of the grid.
    If the right column can fit this height it should not make grid grow any further.
  </section>
  <section contenteditable>
    2. The top area should show all its content without additional space.
  </section>
  <section contenteditable class="middle">
    3. The middle area is a problem.<br>
    It should be strictly between top and bottom areas with gaps equal to grid-gap.
    Its height should be limited by 40px as minimum and its contents as maximum.
    The height is determined by the left column - it should never exceed height of contents and should be <em>as small as needed</em> to make columns having the same height.
    Content that doesn't fit into the area should be cropped (overflow: hidden).
  </section>
  <section contenteditable>
    4. The bottom area should follow the middle one without extra space between them (except grid-gap) and may (or may not - irrelevant) have some free space in the bottom if the left column is longer.
  </section>
</main>
5. Content placed in normal flow should follow bottommost point of the grid regardless witch column contains longer content.

Here is some examples

(content of the right areas is never changed)

Left column is short:

Example 1 - wrong

Example 1 - right

Left column is long and middle area has enough content to fit the gap:

Example 2 - wrong 1

Example 2 - wrong 2

Example 2 - right

Left column is very long and can't be covered by middle cell contents

Example 3 - wrong

Example 3 - right 1

Example 3 - right 2

Some notes

I would like to do it by css only without scripts (I understand that I can add ResizeObserver and handle left area height changes).

I can solve the same problem for the case when adjustable cell it the bottom one, but this solution can't be applied for the middle one:

main {
  display: grid;
  grid-template: auto 1fr / 1fr 2fr;
  grid-gap: 20px;
  line-height: 20px;
}

section {
  background: silver;
}

.left {
  grid-row: 1 / -1;
}

.middle {
  position: relative;
  overflow: hidden;
  min-height: 40px;
}

.inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  background: antiquewhite;
}
0. Grid does not have a fixed height.
<main>
  <section contenteditable class="left">
    1. The left column should determine the preferred size of the grid.
    If the right column can fit this height it should not make grid grow any further.
  </section>
  <section contenteditable>
    2. The top area should show all its content without additional space.
  </section>
  <div class="middle">
    <div contenteditable class="inner">
      There is no bottom cell. There is no bottom cell.
      There is no bottom cell. There is no bottom cell.
      There is no bottom cell. There is no bottom cell.
      There is no bottom cell. There is no bottom cell.
      There is no bottom cell. There is no bottom cell.
      There is no bottom cell. There is no bottom cell.
      There is no bottom cell. There is no bottom cell.
    </div>
  </div>
</main>
5. Content placed in normal flow should follow bottommost point of the grid regardless witch column contains longer content.

css-grid css
0 Answers
Related