grid-lanes-subgrid-001c-ref.html (2365B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: Grid Lanes layout with a subgrid (grid-lanes-subgrid-001c)</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <style> 11 html,body { 12 color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; 13 } 14 15 grid { 16 display: inline-grid; 17 grid-template-rows: 50px 80px 40px; 18 grid-template-columns: auto; 19 gap: 4px 2px; 20 padding: 1px 3px 5px 7px; 21 border: solid; 22 border-width: 3px 5px 1px 1px; 23 background: lightgrey content-box; 24 } 25 grid-lanes-track { 26 display: grid; 27 gap: 4px 2px; 28 } 29 grid-lanes-track:nth-child(1) { 30 grid-template-rows: 50px; 31 grid-template-columns: min-content auto; 32 } 33 grid-lanes-track:nth-child(2) { 34 grid-auto-flow: column; 35 grid-template-rows: 80px 40px; 36 grid-template-columns: auto; 37 } 38 .rows { 39 grid-template-columns: 50px 122px; 40 grid-template-rows: auto; 41 align-content: start; 42 } 43 .rows > grid-lanes-track:nth-child(1) { 44 grid-template-columns: 50px; 45 grid-template-rows: auto; 46 align-content: start; 47 } 48 .rows > grid-lanes-track:nth-child(2) { 49 grid-template-columns: 80px 40px; 50 grid-template-rows: auto; 51 align-content: start; 52 } 53 item { 54 background: grey; 55 width: 3ch; 56 position: relative; 57 } 58 .purple { background:purple; width:auto; justify-self:start; } 59 .rows .purple { justify-self:stretch; } 60 .nth-1 { 61 border: solid; 62 border-width: 3px 13px 1px 1px; 63 margin: 7px 1px 5px 3px; 64 } 65 subgrid { 66 display: grid; 67 grid: subgrid / 2ch auto; 68 grid-row: 2 / span 2; 69 grid-gap: 8px 20px; 70 background: yellow; 71 } 72 grid-lanes-track > subgrid { 73 grid-row: 1 / span 2; 74 } 75 .rows > grid-lanes-track > subgrid { 76 grid: auto auto / subgrid; 77 grid-row: 2; 78 grid-column: 1 / span 2; 79 } 80 .js { justify-self:stretch; } 81 </style> 82 </head> 83 <body> 84 85 <!-- just to sanity check that `grid-lanes` behaves as `none` in the column axis in this case: --> 86 87 <grid> 88 <grid-lanes-track> 89 <item class="nth-1">1</item> 90 <item>5</item> 91 </grid-lanes-track> 92 <grid-lanes-track> 93 <item class="purple">2</item> 94 <item>3</item> 95 <subgrid style="grid:subgrid/auto"> 96 <item class="nth-1">4a</item> 97 <item class="purple js">4b</item> 98 <item>4c</item> 99 </subgrid> 100 </grid-lanes-track> 101 </grid> 102 103 </body></html>