Hacker News Reader

Comment by JoshTriplett | Hacker News Reader

The examples in the article seem to have CSS that directly sizes the columns, albeit with some flexibility such as being able to change the number of columns to better fit the width. It seems like the item widths depend on the column widths, rather than the other way around (which seems like it'd be circular). What's an example where the column widths depend on the items?

View on HN

If you have something like:

  columns: 1fr auto max-content

  <!-- items -->
  <div>1</div>
  <div>somethingsuperlong</div>
  <div style="span: 2;">something else</div>

You first need to decide how big each of the three columns are going to be, then you want to place the items in each of the columns.

Depending on the non-fixed column type (there are different rules for each type) you want to ensure their constraints are satified (typeically they are big enough to encompass the items).

Thanks, that helps; I'd thought about variable numbers of columns based on the width of what they're contained in, but hadn't thought about the possibility of wanting to choose the number of columns to fit their content better. Mostly because I was imagining content like images that can be scaled or text that can be wrapped, rather than fixed-size content or content with a minimum necessary size.

Reply on news.ycombinator.com