summary-display-inline-grid-ref.html (1375B)
1 <!DOCTYPE html> 2 <link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com"> 3 <style> 4 .grid-container { 5 display: inline-grid; 6 grid-template-columns: 200px 10px 0.3fr 10px 0.7fr; 7 grid-template-rows: auto 20px auto; 8 } 9 10 .grid-element { 11 background-color: #444; 12 color: #fff; 13 padding: 20px; 14 font-size: 2em; 15 } 16 17 .element-a { 18 grid-column-start: 1; 19 grid-column-end: ; 20 grid-row-start: 1; 21 grid-row-end: 2; 22 background: #6F9; 23 } 24 25 .element-b { 26 grid-column-start: 3; 27 grid-column-end: 4; 28 grid-row-start: 1; 29 grid-row-end: 2; 30 background: #69F; 31 } 32 33 .element-c { 34 grid-column-start: 5; 35 grid-column-end: 6; 36 grid-row-start: 1; 37 grid-row-end: 2; 38 background: #F69; 39 } 40 41 .element-d { 42 grid-column-start: 1; 43 grid-column-end: 2; 44 grid-row-start: 3; 45 grid-row-end: 4; 46 background: #9F6; 47 } 48 49 .element-e { 50 grid-column-start: 3; 51 grid-column-end: 4; 52 grid-row-start: 3; 53 grid-row-end: 4; 54 background: #96F; 55 } 56 57 .element-f { 58 grid-column-start: 5; 59 grid-column-end: 6; 60 grid-row-start: 3; 61 grid-row-end: 4; 62 background: #F96; 63 } 64 </style> 65 <div class="grid-container"> 66 <div class="grid-element element-a">A</div> 67 <div class="grid-element element-b">B</div> 68 <div class="grid-element element-c">C</div> 69 <div class="grid-element element-d">D</div> 70 <div class="grid-element element-e">E</div> 71 <div class="grid-element element-f">F</div> 72 </div>