multicol-gap-decorations-016-ref.html (1525B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 3 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 4 <style> 5 body { 6 margin: 0px; 7 } 8 9 .outer { 10 columns: 4; 11 orphans: 1; 12 widows: 1; 13 border: dotted 2px black; 14 width: 500px; 15 } 16 17 .col-box { 18 background: cyan; 19 height: 20px; 20 /* keep each box whole */ 21 break-inside: avoid; 22 } 23 24 .spanner { 25 column-span: all; 26 background: grey; 27 opacity: 0.5; 28 height: 20px; 29 } 30 31 .pink-box { 32 column-span: all; 33 background: hotpink; 34 height: 20px; 35 width: 100px; 36 } 37 38 .first-column-gaps { 39 position: absolute; 40 top: 2px; 41 display: flex; 42 height: 20px; 43 left: 123px; 44 column-gap: 128px; 45 } 46 47 .column-gap { 48 background: black; 49 width: 1px; 50 } 51 </style> 52 <div class="first-column-gaps"> 53 <div class="column-gap"></div> 54 <div class="column-gap"></div> 55 <div class="column-gap"></div> 56 </div> 57 <div class="column-gap" style="position: absolute; left: 123px; height: 20px; top:82px;"></div> 58 <div class="outer"> 59 <div class="col-box"></div> 60 <div class="col-box"></div> 61 <div class="col-box"></div> 62 <div class="col-box"></div> 63 64 <div class="spanner"></div> 65 <div class="pink-box"></div> 66 <div class="spanner"></div> 67 68 <div class="col-box"></div> 69 <div class="col-box"></div> 70 </div>