<main>
<h1>Prevent orphan list item with pure CSS</h1>
<h2 id="code" hidden>CSS code (excerpt)</h2>
<style>ol {
  width: calc(4 * var(--item-width));
} /* Columns: 4 ↑ … therefore 4n ↓ */
li:first-child:nth-last-child(4n + 1) {
  margin-left: var(--item-width);
}</style>
<h2 id="result">Result</h2>
<div>
  <ol>
    <li>flex item</li>
    <li>flex item</li>
    <li>flex item</li>
    <li>flex item</li>
    <li>flex item</li>
    <li>flex item</li>
    <li>flex item</li>
    <li>flex item</li>
    <li>flex item</li>
    <li>flex item</li>
    <li>flex item</li>
    <li>flex item</li>
    <li>flex item</li>
  </ol>
</div>
<form method="GET" action="playground" aria-labelledby="settings" hidden>
	<h2 id="settings">Settings</h2>
  <details><summary>Hint</summary><p id="note">The CSS item shift technique lays dormant unless there is more than one row and a single item in the last row. To see the effect, you have to set the number of list items to “Orphan in last row”. The other options are for comparision only.</p></details>
	<div>
		<label for="columns">No. of columns:</label>
		<select id="columns" name="columns">
			<option>3</option>
			<option selected>4</option>
			<option>6</option>
			<option>8</option>
		</select>
	</div>
	<div>
		<label for="items">No. of list items:</label>
		<select id="items" name="items" aria-describedby="note">
      <option value="1,-1">Fewer than no. of columns</option>
      <option value="3,1" selected>Orphan in last row</option>
      <option value="3,2">Two items in last row</option>
      <option value="4,-1">Almost filling four rows</option>
      <option value="4,0">Exactly four rows</option>
		</select>
	</div>
	<div>
		<label for="style">Orphan prevention technique:</label>
		<select id="style" name="style">
			<option value="t1" selected>Offset first item</option>
			<option value="tf">Shorten first row</option>
			<option value="tp">Shorten penultimate row</option>
			<option value="tc">Custom</option>
		</select>
	</div>
  <div>
    <label for="active">Apply selected technique:</label>
    <input id="active" name="active" type="checkbox" checked value="on">
  </div>
	<div>
		<button>Update</button>
	</div>
</form>
</main>