grid-gap-decorations-023-ref.html (2412B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> 3 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 4 <style> 5 body { 6 margin: 0px; 7 } 8 .grid-container { 9 display: grid; 10 grid-template-columns: repeat(4, 1fr); 11 gap: 10px; 12 width: 430px; 13 height: 430px; 14 } 15 .grid-container>div { 16 z-index: 2 17 } 18 .grid-item { 19 background-color: gray; 20 opacity: 0.5; 21 border: 1px solid #000; 22 } 23 .row-gap1 { 24 position: absolute; 25 height: 0px; 26 top: 102.5px; 27 left: 0px; 28 width: 430px; 29 border-bottom: solid 5px red; 30 } 31 .row-gap2 { 32 position: absolute; 33 height: 0px; 34 top: 212.5px; 35 left: 0px; 36 width: 430px; 37 border-bottom: solid 5px red; 38 } 39 .row-gap3 { 40 position: absolute; 41 height: 0px; 42 display: flex; 43 top: 322.5px; 44 left: 0px; 45 border-bottom: solid 5px red; 46 width: 430px; 47 } 48 .col-gap1 { 49 position: absolute; 50 width: 0; 51 height: 430px; 52 border-left: solid 5px blue; 53 top: 0px; 54 left: 102.5px; 55 } 56 .col-gap2 { 57 position: absolute; 58 width: 0; 59 height: 430px; 60 top: 0px; 61 left: 212.5px; 62 border-left: solid 5px blue; 63 } 64 .col-gap3 { 65 position: absolute; 66 width: 0; 67 height: 430px; 68 top: 0px; 69 left: 322.5px; 70 border-left: solid 5px blue; 71 } 72 </style> 73 <div class="grid-container"> 74 <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> 75 <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> 76 <div class="grid-item" style="grid-row: 2 / 4;"></div> 77 <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> 78 <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> 79 <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> 80 <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div> 81 <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> 82 </div> 83 <div class="row-gap1"></div> 84 <div class="row-gap2"></div> 85 <div class="row-gap3"></div> 86 <div class="col-gap1"></div> 87 <div class="col-gap2"></div> 88 <div class="col-gap3"></div>