grid-gap-decorations-007-ref.html (4006B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> 3 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> 4 <style> 5 body { 6 margin: 0px; 7 } 8 9 .grid-container { 10 display: grid; 11 grid-template-columns: repeat(4, 1fr); 12 gap: 10px; 13 14 width: 430px; 15 height: 430px; 16 } 17 18 .grid-item { 19 background-color: gray; 20 opacity: 0.5; 21 border: 1px solid #000; 22 } 23 24 .row-gap1 { 25 position: absolute; 26 height: 0px; 27 display: flex; 28 gap: 10px; 29 top: 102.5px; 30 left: 0px; 31 } 32 33 .row-gap1a { 34 width: 100px; 35 border-bottom: solid 5px red; 36 } 37 38 .row-gap1b { 39 width: 100px; 40 border-bottom: solid 5px red; 41 } 42 43 .row-gap2 { 44 position: absolute; 45 height: 0px; 46 display: flex; 47 gap: 10px; 48 top: 212.5px; 49 left: 110px; 50 } 51 52 .row-gap2a { 53 width: 100px; 54 border-bottom: solid 5px red; 55 } 56 57 .row-gap2b { 58 width: 100px; 59 border-bottom: solid 5px red; 60 } 61 62 .row-gap3 { 63 position: absolute; 64 height: 0px; 65 display: flex; 66 gap: 10px; 67 top: 322.5px; 68 left: 0px; 69 } 70 71 .row-gap3a { 72 width: 100px; 73 border-bottom: solid 5px red; 74 } 75 76 .row-gap3b { 77 width: 210px; 78 border-bottom: solid 5px red; 79 } 80 81 .row-gap3c { 82 width: 100px; 83 border-bottom: solid 5px red; 84 } 85 86 .col-gap1 { 87 position: absolute; 88 width: 0; 89 display: flex; 90 flex-direction: column; 91 gap: 10px; 92 top: 110px; 93 left: 102.5px; 94 } 95 96 .col-gap1a { 97 height: 100px; 98 border-left: solid 5px blue; 99 } 100 101 .col-gap1b { 102 height: 100px; 103 border-left: solid 5px blue; 104 } 105 106 .col-gap2 { 107 position: absolute; 108 width: 0; 109 display: flex; 110 flex-direction: column; 111 gap: 10px; 112 top: 0px; 113 left: 212.5px; 114 } 115 116 .col-gap2a { 117 height: 100px; 118 border-left: solid 5px blue; 119 } 120 121 .col-gap2b { 122 height: 100px; 123 border-left: solid 5px blue; 124 } 125 126 .col-gap3 { 127 position: absolute; 128 width: 0; 129 display: flex; 130 flex-direction: column; 131 gap: 10px; 132 top: 0px; 133 left: 322.5px; 134 } 135 136 .col-gap3a { 137 height: 210px; 138 border-left: solid 5px blue; 139 } 140 141 .col-gap3b { 142 height: 100px; 143 border-left: solid 5px blue; 144 } 145 146 .col-gap3c { 147 height: 100px; 148 border-left: solid 5px blue; 149 } 150 </style> 151 <div class="grid-container"> 152 <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> 153 <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> 154 <div class="grid-item" style="grid-row: 2 / 4;"></div> 155 <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> 156 <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> 157 <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> 158 <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div> 159 <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> 160 </div> 161 162 <div class="col-gap1"> 163 <div class="col-gap1a"></div> 164 <div class="col-gap1b"></div> 165 </div> 166 <div class="col-gap2"> 167 <div class="col-gap2a"></div> 168 <div class="col-gap2b"></div> 169 </div> 170 <div class="col-gap3"> 171 <div class="col-gap3a"></div> 172 <div class="col-gap3b"></div> 173 <div class="col-gap3c"></div> 174 </div> 175 176 <div class="row-gap1"> 177 <div class="row-gap1a"></div> 178 <div class="row-gap1b"></div> 179 </div> 180 <div class="row-gap2"> 181 <div class="row-gap2a"></div> 182 <div class="row-gap2b"></div> 183 </div> 184 <div class="row-gap3"> 185 <div class="row-gap3a"></div> 186 <div class="row-gap3b"></div> 187 <div class="row-gap3c"></div> 188 </div>