How to Prevent Column Break Within an Element

How to prevent column break within an element?

The correct way to do this is with the break-inside CSS property:

.x li {
    break-inside: avoid-column;
}

Unfortunately, as of October 2021, this is still not supported in Firefox but it is supported by every other major browser. With Chrome, I was able to use the above code, but I couldn't make anything work for Firefox (See Bug 549114).

The workaround you can do for Firefox if necessary is to wrap your non-breaking content in a table but that is a really, really terrible solution if you can avoid it.

UPDATE

According to the bug report mentioned above, Firefox 20+ supports page-break-inside: avoid as a mechanism for avoiding column breaks inside an element but the below code snippet demonstrates it still not working with lists:

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

.x li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

column-count property, don't wrap on containing element

Make .review li have display: inline-block to stop it being split over columns. – A Haworth 16 mins ago

Worked.

CSS3 Columns - Force non breaking/splitting element?

Add display:inline-block; to the item you want to prevent from splitting.

CSS columns break elements apart in Chrome even with break-inside:avoid;

This is due to a lack of support. From caniuse.com:

WebKit- and Blink-based browsers do have equivalent support for the
non-standard -webkit-column-break-* properties to accomplish the same
result (but only the auto and always values)

Update

It means the -webkit-column-break-inside: avoid; is not supported in WebKit- and Blink-based browsers, like Chrome (as it is WebKit-based).

Why does css columns separate HTML blocks?

All you need is to use break-inside: avoid-column for the <figure> elements, so that the element will not be broken across multiple columns:

figure {
  break-inside: avoid-column;
}

See proof-of-concept below, with markup copied from your CodePen:

div {
  max-width: 1200px;
  margin: 0 auto;
  columns: 3;
  column-gap: 15px;
}

figure {
  break-inside: avoid-column;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="">
  <figure class="mb-10 text-center">
    <img class="rounded-xl" src='https://www.nps.gov/common/uploads/structured_data/6059CAD8-02E8-2E00-2922DF84800167E0.jpg' />
    <figcaption class="mt-4 text-sm italic text-gray-600 ">Caption here</figcaption>
  </figure>

  <figure class="mb-10 text-center">
    <img class="rounded-xl" src='https://www.nps.gov/common/uploads/structured_data/3C7AC799-1DD8-B71B-0B4E94DE10F014E5.jpg' />
    <figcaption class="mt-4 text-sm italic text-gray-600 ">Caption here</figcaption>
  </figure>

  <figure class="mb-10 text-center">
    <img class="rounded-xl" src='https://www.nps.gov/common/uploads/structured_data/3C7AC355-1DD8-B71B-0B9C2F07853F39F1.jpg' />
    <figcaption class="mt-4 text-sm italic text-gray-600 ">Caption here</figcaption>
  </figure>

  <figure class="mb-10 text-center">
    <img class="rounded-xl" src='https://www.nps.gov/common/uploads/structured_data/3C7AC4C1-1DD8-B71B-0B8592CA6634ABEE.jpg' />
    <figcaption class="mt-4 text-sm italic text-gray-600 ">Caption here</figcaption>
  </figure>

  <figure class="mb-10 text-center">
    <img class="rounded-xl" src='https://www.nps.gov/common/uploads/structured_data/3C7AC638-1DD8-B71B-0BD28B3407821A15.jpg' />
    <figcaption class="mt-4 text-sm italic text-gray-600 ">Caption here</figcaption>
  </figure>

  <figure class="mb-10 text-center">
    <img class="rounded-xl" src='https://www.nps.gov/common/uploads/structured_data/3C7AC8F5-1DD8-B71B-0B661B7FF90F5407.jpg' />
    <figcaption class="mt-4 text-sm italic text-gray-600 ">Caption here</figcaption>
  </figure>
</div>

prevent column break on a block of text?

The right property is actually break-inside, but is not well supported by browsers apart from Internet Explorer 10. I've heard that using page-break-inside will work in Firefox (Gecko), but not always.

p, ul {
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid-column; /* CSS3, IE10+ */
    /* display: table; */
}

Split UL in to two columns, but don't break nested ULs

You could utilize the break-inside/page-break-inside CSS property to avoid the column breaking in the middle of an li element. Both properties do the same thing but they're used in tandem here for wider browser compatibility.

body {
  background-color: #777;
}
.mega-menu {
  column-count: 2;
}
ul {
  margin-top: 0;
}
li {
  list-style-type: none;
}
li a {
  color: #9d9;
  text-decoration: none;
}
li li a {
  color: #fff;
}
li {
  page-break-inside: avoid;
  break-inside: avoid-column;
}

<div class="mega-menu">
  <ul class="sub-nav">
    <li>
      <a href="#" id="Village Council" target="">Village Council</a>
      <ul>
        <li>
          <a href="#" id="Agendas & Minutes" target="">Agendas & Minutes</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" id="Boards" target="">Boards</a>
      <ul>
        <li>
          <a href="#" id="Planning Board" target="">Planning Board</a>
        </li>
        <li>
          <a href="#" id="Board of Adjustment" target="">Board of Adjustment</a>
        </li>
        <li>
          <a href="#" id="Parks, Recreation, and Greenways Board" target="">Parks, Recreation, and Greenways Board</a>
        </li>
        <li>
          <a href="#" id="Committees" target="">Committees</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" id="Ordinances" target="">Ordinances</a>
    </li>
    <li>
      <a href="#" id="Finance & Tax" target="">Finance & Tax</a>
      <ul>
        <li>
          <a href="#" id="Budgets & Reports" target="">Budgets & Reports</a>
        </li>
        <li>
          <a href="#" id="Taxes" target="">Taxes</a>
        </li>
        <li>
          <a href="#" id="Contact Finance" target="">Contact Finance</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" id="Planning & Zoning" target="">Planning & Zoning</a>
      <ul>
        <li>
          <a href="#" id="Maps" target="">Maps</a>
        </li>
        <li>
          <a href="#" id="Land Use" target="">Land Use</a>
        </li>
        <li>
          <a href="#" id="Permitting" target="">Permitting</a>
        </li>
        <li>
          <a href="#" id="Ordinances" target="">Ordinances</a>
        </li>
        <li>
          <a href="#" id="Projects" target="">Projects</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" id="Public Safety" target="">Public Safety</a>
    </li>
    <li>
      <a href="#" id="Parks & Recreation" target="">Parks & Recreation</a>
      <ul>
        <li>
          <a href="#" id="Marvin Efird Park" target="">Marvin Efird Park</a>
        </li>
        <li>
          <a href="#" id="Reserve the Barn" target="">Reserve the Barn</a>
        </li>
        <li>
          <a href="#" id="Trails & Greenways" target="">Trails & Greenways</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" id="Transportation" target="">Transportation</a>
    </li>
    <li>
      <a href="#" id="Staff Directory" target="">Staff Directory</a>
    </li>
  </ul>
</div>

How to Prevent Column Break Within an Element