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