multicol-gap-decorations-006-ref.html (1113B)
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 .outer-container { 6 position: relative; 7 columns: 3; 8 column-fill: auto; 9 height: 100px; 10 width: 620px; 11 gap: 10px; 12 background: yellow; 13 } 14 15 .nested-container { 16 columns: 2; 17 box-decoration-break: clone; 18 padding: 10px; 19 gap: 10px; 20 background: cyan; 21 } 22 23 .inner-column { 24 height: 250px; 25 background: hotpink; 26 } 27 28 #col-gap1 { 29 position: absolute; 30 height: 80px; 31 width: 1px; 32 background: green; 33 top: 10px; 34 left: 100px; 35 } 36 37 #col-gap2 { 38 position: absolute; 39 width: 1px; 40 background: green; 41 top: 10px; 42 left: 310px; 43 height: 45px; 44 } 45 </style> 46 <div class="outer-container"> 47 <div class="nested-container"> 48 <div class="inner-column"></div> 49 </div> 50 <div id="col-gap1"></div> 51 <div id="col-gap2"></div> 52 </div>