cfml

Unimportant CSS question for anyone who wants to play.
I have a page with somewhat dynamic panels.
CSS for a panel includes float: left; width 48%; .
Net effect is two columns, with each row starting below the bottom of the taller of the two panels above.
Is there a simple css-only way to have each panel "tuck up", to start just below the panel immediately above it, instead of below the taller of the two panels above it?
I'm thinking no, but thought I'd ask.

Not easily without JavaScript to equalize the height of adjacent columns,  

With CSS flex `align-items` it is very easy to do: <https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-align-items|https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-align-items>

not exactly the same, but would fill the space, and sequentially, doing column 1 first then column 2.  no need for floats or width.

```&lt;div class="holdsPanels"&gt;
    &lt;div class="panel" style="height: 80px; border: 1px solid grey;"&gt;
        &lt;div&gt;
            &lt;strong&gt;1&lt;/strong&gt; style="height: 80"
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel" style="height: 40px; border: 1px solid red;"&gt;
        &lt;div&gt;
            &lt;strong&gt;2&lt;/strong&gt; style="height: 40"
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel" style="height: 50px; border: 1px solid orange;"&gt;
        &lt;div&gt;
            &lt;strong&gt;3&lt;/strong&gt; style="height: 50"
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel" style="height: 60px; border: 1px solid blue;"&gt;
        &lt;div&gt;
            &lt;strong&gt;4&lt;/strong&gt; style="height: 60"
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel" style="height: 70px; border: 1px solid green;"&gt;
        &lt;div&gt;
            &lt;strong&gt;5&lt;/strong&gt; style="height: 70"
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;style&gt;
div.panel {
  margin-bottom: 10px;
  break-inside: avoid;
}

div.holdsPanels {
  column-count: 2;
  column-gap: 10px;
}
  &lt;/style&gt;```

Found this, looks very promising:
<https://mastery.games/post/tile-layouts/>
I wasn't able to get it to behave like I wanted in the time I had, so going to punt for now.
Thanks for the ideas.

<@U0R6WFD7S>, that is the kind of question you might want to ask ChatGPT. As a test, I asked it the following question, and it had plenty to say:
&gt; "A CSS question. I have a page with somewhat dynamic panels.
&gt; CSS for a panel includes float: left; width 48%; .
&gt; Net effect is two columns, with each row starting below the bottom of the taller of the two panels above.
&gt; Is there a simple css-only way to have each panel "tuck up", to start just below the panel immediately above it, instead of below the taller of the two panels above it?
&gt; I'm thinking no, but thought I'd ask ChatGPT."

Thank you!
Besides the actual answer it gave, this is literally the first time I've seen ChatGPT give a non-trivial, non-hallucinatory, and actually useful response.
Haven't tried it yet, might turn out to be bs, but it passed my first-level sniff test, which is cool.