CSS Mod Function Basic

<!DOCTYPE html>
<title>My Example</title>

.mod-box {
    background-color: #0d6efd;
    color: white;
    font-weight: bold;
    height: 40px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-radius: 4px;
    
    /* 
      1. Find the remainder of the index (--i) divided by 3.
         This creates a repeating cycle: 0, 1, 2, 0, 1, 2.
      2. Multiply that remainder by 40px to create a stepped offset.
    */
    --cycle: mod(var(--i), 3);
    margin-left: calc(var(--cycle) * 40px);
  }
  
  .mod-box:last-child {
    margin-bottom: 0;
  }

/* Assign a simple sequential index to each box */
  .box-0 { --i: 0; }
  .box-1 { --i: 1; background-color: #0b5ed7; }
  .box-2 { --i: 2; background-color: #0a58ca; }
  .box-3 { --i: 3; }
  .box-4 { --i: 4; background-color: #0b5ed7; }
  .box-5 { --i: 5; background-color: #0a58ca; }
</style>

<div class="mod-container">
  <div class="mod-box box-0">Index 0 (Remainder 0)</div>
  <div class="mod-box box-1">Index 1 (Remainder 1)</div>
  <div class="mod-box box-2">Index 2 (Remainder 2)</div>
  <div class="mod-box box-3">Index 3 (Remainder 0)</div>
  <div class="mod-box box-4">Index 4 (Remainder 1)</div>
  <div class="mod-box box-5">Index 5 (Remainder 2)</div>
</div>