<!DOCTYPE html> <meta charset="utf-8"> <title>CSS Test: summary with 'display: inline-grid'</title> <link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com"> <link rel="match" href="summary-display-inline-grid-ref.html"> <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> <meta name="assert" content="Checks that styling a <summary> with 'display: inline-grid' makes it a grid container."> <style> .grid-container { display: inline-grid; grid-template-columns: 200px 10px 0.3fr 10px 0.7fr; grid-template-rows: auto 20px auto; } .grid-element { background-color: #444; color: #fff; padding: 20px; font-size: 2em; } .element-a { grid-column-start: 1; grid-column-end: ; grid-row-start: 1; grid-row-end: 2; background: #6F9; } .element-b { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; background: #69F; } .element-c { grid-column-start: 5; grid-column-end: 6; grid-row-start: 1; grid-row-end: 2; background: #F69; } .element-d { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; background: #9F6; } .element-e { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; background: #96F; } .element-f { grid-column-start: 5; grid-column-end: 6; grid-row-start: 3; grid-row-end: 4; background: #F96; } </style> <summary class="grid-container"> <div class="grid-element element-a">A</div> <div class="grid-element element-b">B</div> <div class="grid-element element-c">C</div> <div class="grid-element element-d">D</div> <div class="grid-element element-e">E</div> <div class="grid-element element-f">F</div> </summary>