multicol-gap-decorations-013-ref.html (742B)
1 <!DOCTYPE html> 2 <style> 3 body { 4 margin: 0px; 5 } 6 7 .mc { 8 position: absolute; 9 top: 0px; 10 left: 0px; 11 width: 100px; 12 height: 100px; 13 columns: 2; 14 column-fill: auto; 15 column-gap: 10px; 16 } 17 18 .fake-column-gaps { 19 position: absolute; 20 top: 4px; 21 left: 45px; 22 display: flex; 23 height: 92px; 24 column-gap: 45px; 25 } 26 27 .column-gap { 28 width: 10px; 29 background: gold; 30 } 31 </style> 32 33 <div class="fake-column-gaps"> 34 <div class="column-gap"></div> 35 <div class="column-gap"></div> 36 <div class="column-gap"></div> 37 </div> 38 <div class="mc"> 39 <div style="height: 400px; background: cyan;"> 40 </div> 41 </div>