multicol-gap-decorations-005.html (1613B)
1 <!DOCTYPE html> 2 <title> 3 CSS Gap Decorations: Multicolumn gap decorations painted with nested multicol with column wrap. 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 6 <link rel="match" href="multicol-gap-decorations-005-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-container { 14 column-count: 2; 15 column-gap: 10px; 16 column-rule-width: 10px; 17 column-rule-style: solid; 18 column-rule-color: blue; 19 border: 1px solid #ccc; 20 width: 210px; 21 height: 50px; 22 } 23 24 .nested-container { 25 column-count: 2; 26 column-gap: 10px; 27 width: 100px; 28 column-rule-width: 10px; 29 column-rule-style: solid; 30 column-rule-color: gold; 31 row-gap: 10px; 32 row-rule-width: 10px; 33 row-rule-style: solid; 34 row-rule-color: purple; 35 column-wrap: wrap; 36 column-fill: auto; 37 column-height: 20px; 38 } 39 40 .column1 { 41 background: rgb(96 139 168 / 0.2); 42 width: 100px; 43 height: 50px 44 } 45 46 .nested-column { 47 background: black; 48 width: 45px; 49 height: 20px; 50 } 51 </style> 52 53 <div class="outer-container"> 54 <div class="column1"> 55 </div> 56 <div class="column2"> 57 <div class="nested-container"> 58 <div class="nested-column"></div> 59 <div class="nested-column"></div> 60 <div class="nested-column"></div> 61 <div class="nested-column"></div> 62 </div> 63 </div> 64 </div>