grid-gap-decorations-058-ref.html (1535B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://www.w3.org/TR/css-gaps-1/"> 3 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> 4 <style> 5 body { 6 margin: 0px; 7 } 8 .grid { 9 display: grid; 10 grid-template: repeat(3, 100px) / repeat(3, 100px); 11 gap: 20px; 12 position: relative; 13 } 14 .item { 15 width: 100%; 16 height: 100%; 17 background: lightgray; 18 opacity: 0.8; 19 } 20 .col-gaps { 21 display: flex; 22 position: absolute; 23 top: 0; 24 left: 107px; 25 column-gap: 114px; 26 } 27 .col-gap-1-group { 28 display: flex; 29 flex-direction: column; 30 justify-content: center; 31 height: 340px; 32 } 33 .col-gap { 34 background: blue; 35 width: 6px; 36 height: 120px; 37 } 38 .col-gap-2-group { 39 display: flex; 40 flex-direction: column; 41 justify-content: center; 42 43 height: 340px; 44 } 45 .row-gaps { 46 display: flex; 47 flex-direction: column; 48 position: absolute; 49 top: 107px; 50 left: 0px; 51 row-gap: 114px; 52 } 53 .row-gap-1-group { 54 display: flex; 55 flex-direction: row; 56 justify-content: start; 57 width: 340px; 58 } 59 .row-gap { 60 background: red; 61 width: 110px; 62 height: 6px; 63 } 64 .row-gap-2-group { 65 display: flex; 66 flex-direction: row; 67 justify-content: start; 68 column-gap: 20px; 69 height: 340px; 70 } 71 </style> 72 <div class="grid"> 73 <div class="item" style="grid-area: 1 / 1 / 2 / 3"></div> 74 <div class="item" style="grid-area: 1 / 3 / 4 / 4"></div> 75 <div class="item" style="grid-area: 2 / 1 / 3 / 2"></div> 76 </div>