grid-lanes-item-placement-007-ref.html (2697B)
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 item placement (RTL)</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:15px/1 monospace; padding:0; margin:0; 13 } 14 15 grid { 16 display: inline-grid; 17 gap: 1px 2px; 18 grid-template-columns: repeat(4,20px); 19 color: #444; 20 border: 1px solid; 21 padding: 2px; 22 direction: rtl; 23 vertical-align: text-top; 24 } 25 26 flex { 27 gap: 1px; 28 display: flex; 29 flex-direction: column; 30 height: fit-content; 31 } 32 33 item { 34 background-color: #444; 35 color: #fff; 36 } 37 </style> 38 </head> 39 <body> 40 41 <grid> 42 <item style="padding-top:30px; grid-column:1/2; grid-row:1/2">1</item> 43 <flex> 44 <item>2</item> 45 <item>5</item> 46 </flex> 47 <flex> 48 <item>3</item> 49 <item>6</item> 50 </flex> 51 <item style="grid-column:4/5; height: fit-content;">4</item> 52 </grid> 53 54 <grid> 55 <item style="padding-top:30px; grid-column:2/3">2</item> 56 <flex> 57 <item style="grid-column:3/4">3</item> 58 <item style="grid-column:3/4">6</item> 59 </flex> 60 <item style="grid-column:4/5; height: fit-content;">4</item> 61 <div style="grid-row:1/2"> 62 <flex> 63 <item>1</item> 64 <item>5</item> 65 </flex> 66 </div> 67 </grid> 68 69 <grid> 70 <item style="padding-top:30px; grid-column:1/2">1</item> 71 <item style="padding-top:30px; grid-column:2/3">2</item> 72 <flex> 73 <item style="padding-top:10px;">3</item> 74 <item>5</item> 75 </flex> 76 <flex> 77 <item>4</item> 78 <item>6</item> 79 </flex> 80 </grid> 81 82 <grid> 83 <flex> 84 <item>1</item> 85 <item>5</item> 86 </flex> 87 <flex> 88 <item style="padding-top:30px">2</item> 89 <item>6</item> 90 </flex> 91 <flex> 92 <item style="padding-top:10px; grid-column:3/4">3</item> 93 <item style="width: calc(200% + 2px)">4</item> 94 </flex> 95 </grid> 96 97 <grid> 98 <item style="grid-column:1/2; height: fit-content;">1</item> 99 <item style="padding-top:30px; height: fit-content;">2</item> 100 <item style="padding-top:10px; height: fit-content;">3</item> 101 <item style="grid-column:1/span 3">4</item> 102 <div style="grid-column:4/5; grid-row:1/2"> 103 <flex> 104 <item>5</item> 105 <item>6</item> 106 </flex> 107 </div> 108 </grid> 109 110 <grid> 111 <item style="grid-column:1/2; height: fit-content;">1</item> 112 <item style="padding-top:30px; grid-column:2/3; height: fit-content;">2</item> 113 <item style="padding-top:10px; grid-column:3/4; height: fit-content;">3</item> 114 <item style="grid-column:1/span 4">4</item> 115 <item style="grid-column:1/2">5</item> 116 <item style="grid-column:2/3">6</item> 117 </grid> 118 119 </body> 120 </html>