multicol-gap-decorations-016.html (1261B)
1 <!DOCTYPE html> 2 <title> 3 CSS Gap Decorations: Multicolumn gap decorations painted with different num of columns per row. 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 6 <link rel="match" href="multicol-gap-decorations-016-ref.html"> 7 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 8 <style> 9 body { 10 margin: 0px; 11 } 12 13 .outer { 14 columns: 4; 15 column-rule: solid 1px black; 16 orphans: 1; 17 widows: 1; 18 border: dotted 2px black; 19 width: 500px; 20 } 21 22 .col-box { 23 background: cyan; 24 height: 20px; 25 /* keep each box whole */ 26 break-inside: avoid; 27 } 28 29 .spanner { 30 column-span: all; 31 background: grey; 32 opacity: 0.5; 33 height: 20px; 34 } 35 36 .pink-box { 37 column-span: all; 38 background: hotpink; 39 height: 20px; 40 width: 100px; 41 } 42 </style> 43 <div class="outer"> 44 <div class="col-box"></div> 45 <div class="col-box"></div> 46 <div class="col-box"></div> 47 <div class="col-box"></div> 48 49 <div class="spanner"></div> 50 <div class="pink-box"></div> 51 <div class="spanner"></div> 52 53 <div class="col-box"></div> 54 <div class="col-box"></div> 55 </div>