grid-track-intrinsic-sizing-002-ref.html (3315B)
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>CSS Grid Test: Intrinsic track sizing (w/o span:1)</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } 12 13 .grid { 14 position: relative; 15 display: grid; 16 border: 1px dashed; 17 width: 500px; 18 grid-template-columns: auto; 19 padding-bottom:10px; 20 justify-content: start; 21 align-content: start; 22 } 23 24 .d1 { 25 position: absolute; 26 bottom: 0; 27 background: grey; 28 } 29 .g1 .d1 { 30 width: 0px; 31 } 32 .g2 .d1 { 33 width: 0px; 34 } 35 .g2f .d1 { 36 width: 0px; 37 } 38 .g3 .d1 { 39 width: 0px; 40 } 41 .g4 .d1 { 42 width: 80px; 43 } 44 .g4f .d1 { 45 width: 0px; 46 } 47 .g5 .d1 { 48 width: 80px; 49 } 50 .g6 .d1 { 51 width: 0px; 52 } 53 .g6f .d1 { 54 width: 0px; 55 } 56 .g7 .d1 { 57 width: 0px; 58 } 59 .g8 .t { 60 width: 196px; 61 } 62 .g8 .d1 { 63 width: 200px; 64 } 65 .g9 .d1 { 66 width: 0px; 67 } 68 .gA .d1 { 69 width: 80px; 70 } 71 .gB .d1 { 72 width: 80px; 73 } 74 .gC .d1 { 75 width: 80px; 76 } 77 .gD .d1 { 78 width: 80px; 79 } 80 81 .t { grid-column: span 1; border:2px solid; } 82 div { min-width:0; min-height:10px; } 83 t { display:inline-block; width:20px; } 84 85 </style> 86 </head> 87 <body> 88 89 90 <div class="g1 grid"> 91 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 92 <div class="d1"></div> 93 </div> 94 95 <div class="g2 grid"> 96 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 97 <div class="d1"></div> 98 </div> 99 <div class="g2f grid"> 100 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 101 <div class="d1"></div> 102 </div> 103 104 <div class="g3 grid"> 105 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 106 <div class="d1"></div> 107 </div> 108 109 <div class="g4 grid"> 110 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 111 <div class="d1"></div> 112 </div> 113 <div class="g4f grid"> 114 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 115 <div class="d1"></div> 116 </div> 117 118 <div class="g5 grid"> 119 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 120 <div class="d1"></div> 121 </div> 122 123 <div class="g6 grid"> 124 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 125 <div class="d1"></div> 126 </div> 127 <div class="g6f grid"> 128 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 129 <div class="d1"></div> 130 </div> 131 132 <div class="g7 grid"> 133 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 134 <div class="d1"></div> 135 </div> 136 137 <div class="g8 grid"> 138 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 139 <div class="d1"></div> 140 </div> 141 142 <div class="g9 grid"> 143 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 144 <div class="d1"></div> 145 </div> 146 147 <div class="gA grid"> 148 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 149 <div class="d1"></div> 150 </div> 151 152 <div class="gB grid"> 153 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 154 <div class="d1"></div> 155 </div> 156 157 <div class="gC grid"> 158 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 159 <div class="d1"></div> 160 </div> 161 162 <div class="gD grid"> 163 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 164 <div class="d1"></div> 165 </div> 166 167 </body> 168 </html>