grid-lanes-subgrid-flex-ref.html (1512B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <title>Verify correct sizing of flex tracks when using subgrid in CSS Grid Lanes</title> 10 <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> 11 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids"> 12 <style> 13 grid { 14 display: inline-grid; 15 grid-template-columns: 1fr 2fr 3fr; 16 border: 1px solid; 17 background: lightgrey; 18 } 19 20 subgrid { 21 display: grid; 22 grid: subgrid / subgrid; 23 grid-column: 2 / span 2; 24 grid-row: 1 / span 2; 25 background: lightblue; 26 } 27 </style> 28 </head> 29 30 <body> 31 <grid> 32 <item>1</item> 33 <subgrid> 34 <item>2</item> 35 <item>3</item> 36 <item>4</item> 37 </subgrid> 38 <item>5</item> 39 </grid> 40 41 <grid> 42 <item style="width: 2ch">1</item> 43 <subgrid> 44 <item>2</item> 45 <item>3</item> 46 <item>4</item> 47 </subgrid> 48 <item>5</item> 49 </grid> 50 51 <grid> 52 <item>1</item> 53 <subgrid> 54 <item style="width: 3ch">2</item> 55 <item>3</item> 56 <item>4</item> 57 </subgrid> 58 <item>5</item> 59 </grid> 60 61 <grid> 62 <item style="width: 4ch">1</item> 63 <subgrid> 64 <item>2</item> 65 <item>3</item> 66 <item>4</item> 67 </subgrid> 68 <item>5</item> 69 </grid> 70 71 <grid> 72 <item style="width: 3ch">1</item> 73 <subgrid> 74 <item>2</item> 75 <item>3</item> 76 <item>4</item> 77 </subgrid> 78 <item>5</item> 79 </grid> 80 </body> 81 </html>