multicol-gap-decorations-006.html (974B)
1 <!DOCTYPE html> 2 <title> 3 CSS Gap Decorations: Multicolumn gap decorations painted with nested fragmented multicol. 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 6 <link rel="match" href="multicol-gap-decorations-006-ref.html"> 7 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 8 <style> 9 .outer-container { 10 columns: 3; 11 column-fill: auto; 12 height: 100px; 13 width: 620px; 14 gap: 10px; 15 background: yellow; 16 } 17 18 .nested-container { 19 columns: 2; 20 box-decoration-break: clone; 21 padding: 10px; 22 column-rule: solid; 23 column-rule-color: green; 24 column-rule-width: 1px; 25 background: cyan; 26 gap: 10px; 27 } 28 29 .inner-column { 30 height: 250px; 31 background: hotpink; 32 } 33 </style> 34 <div class="outer-container"> 35 <div class="nested-container"> 36 <div class="inner-column"></div> 37 </div> 38 </div>