grid-gap-decorations-042-ref.html (1036B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 3 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> 4 <style> 5 .grid-container { 6 display: grid; 7 grid-template-columns: repeat(4, 1fr); 8 width: 430px; 9 height: 430px; 10 } 11 12 .grid-item { 13 background-color: gray; 14 opacity: 0.5; 15 border: 1px solid #000; 16 } 17 </style> 18 19 <div class="grid-container"> 20 <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> 21 <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> 22 <div class="grid-item" style="grid-row: 2 / 4;"></div> 23 <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> 24 <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> 25 <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> 26 <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div> 27 <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> 28 </div>