grid-lanes-item-placement-006-ref.html (3217B)
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</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 vertical-align: text-top; 23 } 24 25 item { 26 background-color: #444; 27 color: #fff; 28 } 29 30 flex { 31 gap: 1px; 32 display: flex; 33 flex-direction: column; 34 height: fit-content; 35 } 36 </style> 37 </head> 38 <body> 39 40 <grid> 41 <item style="padding-top:30px; grid-column:1/2">1</item> 42 <flex> 43 <item>2</item> 44 <item>5</item> 45 </flex> 46 <flex> 47 <item>3</item> 48 <item>6</item> 49 </flex> 50 <item style="grid-column:4/5; height: fit-content;">4</item> 51 </grid> 52 53 <grid> 54 <flex> 55 <item>1</item> 56 <item>5</item> 57 </flex> 58 <item style="padding-top:30px; grid-column:2/3">2</item> 59 <flex> 60 <item style="grid-column:3/4">3</item> 61 <item style="grid-column:3/4">6</item> 62 </flex> 63 <item style="grid-column:4/5; height: fit-content;">4</item> 64 </grid> 65 66 <grid> 67 <item style="padding-top:30px; grid-column:1/2">1</item> 68 <item style="padding-top:30px; grid-column:2/3">2</item> 69 <flex> 70 <item style="padding-top:10px">3</item> 71 <item>5</item> 72 </flex> 73 <flex> 74 <item>4</item> 75 <item>6</item> 76 </flex> 77 </grid> 78 79 <grid> 80 <flex> 81 <item>1</item> 82 <item>5</item> 83 </flex> 84 <flex> 85 <item style="padding-top:30px">2</item> 86 <item>6</item> 87 </flex> 88 <flex> 89 <item style="padding-top:10px">3</item> 90 <item style="width: calc(200% + 2px)">4</item> 91 </flex> 92 </grid> 93 94 <grid> 95 <item style="padding-top:30px; grid-column:1/2">1</item> 96 <item style="padding-top:30px; grid-column:2/3">2</item> 97 <flex> 98 <item style="padding-top:10px">3</item> 99 <item>6</item> 100 </flex> 101 <flex> 102 <item>4</item> 103 <item>5</item> 104 </flex> 105 </grid> 106 107 <grid> 108 <flex> 109 <item>1</item> 110 <item>5</item> 111 <item>6</item> 112 </flex> 113 <flex> 114 <item style="padding-top:30px; height: calc(100% - 2px);">2</item> 115 </flex> 116 <flex> 117 <item style="padding-top:10px;">3</item> 118 <item style="width: calc(200% + 2px)">4</item> 119 </flex> 120 </grid> 121 122 <grid> 123 <item style="grid-column:1/2; height: fit-content;">1</item> 124 <item style="padding-top:30px; grid-column:2/3; height: fit-content;">2</item> 125 <item style="padding-top:10px; grid-column:3/4; height: fit-content;">3</item> 126 <item style="grid-column:1/span 3">4</item> 127 <div style="display: grid; grid-row: 1/2; grid-column: 4/5;"> 128 <flex> 129 <item>5</item> 130 <item>6</item> 131 </flex> 132 </div> 133 </grid> 134 135 <grid> 136 <item style="grid-column:1/2; height: fit-content;">1</item> 137 <item style="padding-top:30px; grid-column:2/3; height: fit-content;">2</item> 138 <item style="padding-top:10px; grid-column:3/4; height: fit-content;">3</item> 139 <item style="grid-column:1/span 4">4</item> 140 <item style="grid-column:1/2">5</item> 141 <item style="grid-column:2/3">6</item> 142 </grid> 143 144 </body> 145 </html>