Example

by Artem

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/widows -->

<div>
  <p>This is the first paragraph containing some text.</p>
  <p>This is the second paragraph containing some more text than the first one. It is used to demonstrate how widows work.</p>
  <p>This is the third paragraph. It has a little bit more text than the first one.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe odio, dolor ea, temporibus quia consequatur, neque dolorem aliquid aliquam impedit dicta quisquam. Quas porro ducimus neque culpa libero fuga asperiores minima assumenda et totam voluptatum saepe error facilis, doloribus natus, deserunt quae consectetur voluptatibus! A corporis nesciunt vitae, inventore quisquam illum enim eos neque quis aliquid reprehenderit asperiores et fugiat facere, deserunt quam, magni. Veniam optio quod quia, nemo excepturi cum possimus vitae ipsum, blanditiis natus obcaecati in aspernatur, perspiciatis ea voluptate inventore voluptatum recusandae repellendus quas nesciunt. Voluptatum, magnam! Nihil quisquam iure vero praesentium aperiam odit, voluptates iste pariatur.</p>
</div>

CSS

div {
  background-color: #8cffa0;
  columns: 3;
  widows: 6;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}