CSS grid sizing: allow either column to occupy the entire width if the other is small, but if not use a certain ratio

Viewed 24

I want to lay out a CSS grid (or table) the following properties:

  • in the most common case, where the columns together contain content which would fill the entire width, give them widths of 1:2 (1fr 2fr)
  • however, if the first column's content is small, then allow the second column to expand
  • likewise, if the second column's content is small, allow the first column to expand
  • if both columns are small, the grid can shrink.
  • both columns should have a minimum width, but this seems easy with the tools for grid layouts.

In addition, because I think this may be difficult to achieve with the above: the first column will contain a <ul>. Its list items should not wrap; they should be truncated. This is easy to achieve (with white-space: nowrap) if you specify a max-width on the first column, but as far as I can tell it is not possible to specify a proportional max-width because it should expand if the other column is small. In addition I think it means that any measure in the grid sizing cannot use the max-content of the first column, because that will be the full width not truncated, which will throw things off in most contexts.

Here is an example, without an attempt at truncation, that is as close as we have got:

.notatable {
  display: grid;
  grid-template-columns: fit-content(33%) 2fr;
  column-gap: 1em;
}
<div class="notatable">
    <span>A</span>
    <span>B</span>
    <span>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </span>
    <span>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </span>
</div>

<hr>

<div class="notatable">
  <span>A</span>
  <span>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </span>
</div>

<hr>

<div class="notatable">
  <span>A test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </span>
  <span>B</span>
</div>

<hr>

<div class="notatable">
  <span>A</span>
  <span>B</span>
</div>

(Please note there will be more rows in reality)

The scenarios match the first four bulleted requirements above, and you can see that the third scenario is the only one unsatisfied: the second column's content is small, but the first column doesn't expand. This is of course expected; 33% is an upper-bound of the size of the first column.

This seems like it should be simple. I can sum up the logic as, "expand if you have content and there's room, and if there isn't, split the room in this ratio." In addition to getting a practical solution I'd appreciate knowing if there is an underlying reason why this is harder than I expect. Is something underspecified? Are some of these lengths cyclically dependent?

0 Answers
Related