table-col-paint-htb-ltr-ref.html (1140B)
1 <!DOCTYPE html> 2 <style> 3 .multicol { 4 inline-size: 400px; 5 block-size: 100px; 6 columns: 4; 7 column-fill: auto; 8 gap: 0; 9 } 10 .pattern1 { 11 background: repeating-linear-gradient(lime, lime 20px, blue 20px, blue 40px); 12 } 13 .pattern2 { 14 background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); 15 } 16 </style> 17 <div class="multicol"> 18 <div style="position: relative; inline-size: 100%; block-size: 400px;"> 19 <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> 20 <div class="pattern1" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(50% - 15px); block-size: 255px;"></div> 21 <div class="pattern2" style="position: absolute; inset-block-start: 60px; inset-inline-start: 55px; inline-size: calc(50% - 15px); block-size: 255px;"></div> 22 <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> 23 <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> 24 </div> 25 </div>