grid-lanes-intrinsic-sizing-rows-003-mix1-ref.html (4122B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- WARNING: The interaction of writing-mode and min-content sizing seems to be a bit hazy. It's not clear if this is a correct reference. --> 7 <html> 8 <meta charset="utf-8"> 9 <title>Reference: Grid Lanes layout min-content sizing</title> 10 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 12 <style> 13 14 @import "support/grid-lanes-intrinsic-sizing-visual.css"; 15 16 grid { 17 display: inline-grid; 18 gap: 1px 2px; 19 grid-template-rows: 1fr 2fr min-content max-content; 20 grid-auto-flow: column; 21 border: 1px solid; 22 padding: 1px 0 2px 0; 23 vertical-align: top; 24 height: min-content; 25 font-family: Ahem; 26 } 27 28 item { 29 justify-self: start; 30 writing-mode: vertical-rl; 31 text-orientation: sideways; 32 } 33 .hidden { 34 visibility: hidden; 35 width: 0; 36 } 37 38 grid > item:nth-child(1) { 39 background-color: #89CFF0; 40 } 41 42 grid > item:nth-child(2) { 43 background-color: #FF6F61; 44 } 45 46 grid > item:nth-child(3) { 47 background-color: #FDF3E7; 48 } 49 50 grid > item:nth-child(4) { 51 background-color: #F4C542; 52 } 53 54 grid > item:nth-child(5) { 55 background-color: #333333; 56 } 57 58 grid > item:nth-child(6) { 59 background-color: #B2C8A5; 60 } 61 </style> 62 63 <body> 64 65 <section> 66 <grid style="grid-template-columns: 15px auto"> 67 <item style="height:2ch">1</item> 68 <item>2 2</item> 69 <item>3 3</item> 70 <item>4</item> 71 <item>5 5</item> 72 73 <item class="hidden" style="grid-column: 2; grid-row: 3; height:2ch">0</item> 74 <item class="hidden" style="grid-area: 4/2">0 0</item> 75 </grid> 76 77 <grid style="grid-template-columns: 15px auto"> 78 <item style="height: 3ch">1</item> 79 <item>2 2</item> 80 <item>3 3</item> 81 <item style="height: 3ch">4</item> 82 <item style="height: 2ch">5 5</item> 83 84 <item class="hidden" style="grid-row: 3; grid-column: 2; height: 2ch;">0</item> 85 <item class="hidden" style="grid-area: 4/2">0 0</item> 86 </grid> 87 88 <grid> 89 <item>1</item> 90 <item>2 2</item> 91 <item style="grid-column: span 2">3 3</item> 92 <item>4</item> 93 <item style="height:2ch; grid-row:2">5 5</item> 94 95 <item class="hidden" style="grid-row: 1; grid-column: 2;">0 0</item> 96 <item class="hidden" style="grid-row: 4; grid-column: 2;">0 0</item> 97 </grid> 98 99 <grid style="grid-template-columns: 30px auto"> 100 <item>1</item> 101 <item>2 2</item> 102 <item>3 3</item> 103 <item>4</item> 104 <item style="height:4ch; grid-column: 2; grid-row:2/span 2">5 5</item> 105 106 <item class="hidden" style="grid-row: 1; grid-column: 2;">0 0</item> 107 <item class="hidden" style="grid-row: 4; grid-column: 2;">0 0</item> 108 </grid> 109 110 <grid style="grid-template-columns: 30px auto auto"> 111 <item>1</item> 112 <item>2 2</item> 113 <item>3 3</item> 114 <item>4</item> 115 <item style="grid-row:2/span 2">5 5</item> 116 <item style="height:5ch; grid-row:span 3/4">6</item> 117 118 <item class="hidden" style="grid-row: 1; grid-column: 2;">0 0</item> 119 <item class="hidden" style="grid-row: 4; grid-column: 2;">0 0</item> 120 </grid> 121 122 <grid style="grid-template-columns: 30px auto auto"> 123 <item>1</item> 124 <item>2 2</item> 125 <item>3 3</item> 126 <item>4</item> 127 <item style="height:3ch; grid-row:span 2/4">5</item> 128 <item style="height:5ch; grid-row:1/span 3">6</item> 129 130 <item class="hidden" style="grid-row: 1; grid-column: 2;">0 0</item> 131 <item class="hidden" style="grid-row: 4; grid-column: 2;">0 0</item> 132 </grid> 133 134 <grid style="grid-template-columns: 30px auto"> 135 <item style="height: 3ch;">1</item> 136 <item>2 2</item> 137 <item>3 3</item> 138 <item style="height: 3ch;">4</item> 139 <item style="grid-column: 2; grid-row: span 4;">5 5</item> 140 </grid> 141 142 <grid style="grid-template-columns: 30px auto"> 143 <item style="height: 3ch;">1</item> 144 <item>2 2</item> 145 <item>3 3</item> 146 <item style="height: 3ch;">4</item> 147 <item style="height:6ch; grid-row:span 4;">5 5</item> 148 </grid> 149 150 <grid style="grid-template-columns: 30px auto"> 151 <item style="height: 3ch;">1</item> 152 <item>2 2</item> 153 <item>3 3</item> 154 <item style="height: 3ch;">4</item> 155 <item style="height:6ch; grid-row:span 3;">5 5</item> 156 </grid> 157 </section> 158 </body>