How to group HTML elements so they move together within a div with a "columns" styling?

I'm using a basic Jekyll site with Minima CSS. I want to use a post format with two columns of content:

<div style="columns: 2;">...</div>

Each content group consists of a link, an image tag, a title enclosed with p-tags, and a break.

I want the group to move together. Each link/image/title/break construct should remain in the same column.

I've tried surrounding each group with divs and with section tags - no luck.

Suggestions?

Solution

In order to prevent children of a parent that's using columns from breaking across columns, you can wrap them in a container that is display: inline-block.

The specific tag you use for this container is up to you. If you want to use a section, go for it.

Example:

ul {
  column-count: 2;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

li {
  display: inline-block;
  border-bottom: 1px solid gray;
  padding-bottom: 12px;
}

<ul>
  <li>
    <div>
      <p>I won't break across columns!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
    </div>
  </li>
  <li>
    <div>
      <p>I won't break across columns!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
    </div>
  </li>
  <li>
    <div>
      <p>I won't break across columns!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur ultrices suscipit. Etiam fringilla porta tellus. Phasellus vitae semper dui. In non massa non sapien porttitor feugiat a ac velit.</p>
    </div>
  </li>
</ul>