CSS break-inside Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic page styles */
body {
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 24px;
  background: #f7f9fb;
  color: #222;
}

/* Center container */
.container {
  max-width: 900px;
  margin: 0 auto;
}

/* Multi-column layout */
.columns {
  column-count: 3;
  column-gap: 20px;
}

/* Prevent cards and grouped blocks from breaking inside columns/pages */
.card,
.group {
  background: #fff;
  padding: 12px;
  margin: 0 0 18px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  /* Compatibility fallbacks */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Slight visual variation for grouped content */
.group {
  background: linear-gradient(180deg, #eaf4ff, #fff);
}

/* Headings and intro */
h1 {
  font-size: 20px;
  margin: 0 0 12px;
}

h2 {
  font-size: 16px;
  margin: 0 0 8px;
}

.intro {
  margin: 0 0 16px;
  color: #555;
}</style></head><body><div class="container">
  <h1>break-inside: avoid example</h1>
  <p class="intro">This demonstrates preventing elements from breaking across columns or pages.</p>
  <div class="columns">
    <article class="card">
      <h2>Card 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
    </article>
    <article class="card">
      <h2>Card 2</h2>
      <p>Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
    </article>
    <article class="card">
      <h2>Card 3</h2>
      <p>Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
    </article>
    <div class="group">
      <h2>Grouped Content</h2>
      <p>This group should not be split between columns. It contains multiple paragraphs that stay together.</p>
      <p>Second paragraph in the group to illustrate longer content.</p>
    </div>
    <article class="card">
      <h2>Card 4</h2>
      <p>Fusce nec tellus sed augue semper porta. Mauris massa.</p>
    </article>
    <article class="card">
      <h2>Card 5</h2>
      <p>Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent.</p>
    </article>
  </div>
</div></body></html>