grid-lanes-intrinsic-sizing-rows-003-auto-ref.html (3731B)
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: repeat(4,auto); 20 grid-auto-flow: column; 21 border: 1px solid; 22 padding: 1px 0 2px 0; 23 vertical-align: top; 24 font-family: Ahem; 25 height: min-content; 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> 67 <item style="height:2ch">1</item> 68 <item style="grid-column: span 2">2 2</item> 69 <item style="grid-column: span 2">3 3</item> 70 <item>4</item> 71 <item style="grid-column: span 2">5 5</item> 72 73 <item class="hidden" style="grid-area: 4/2">0 0</item> 74 </grid> 75 76 <grid> 77 <item style="height: 3ch">1</item> 78 <item style="grid-column: span 2">2 2</item> 79 <item style="grid-column: span 2">3 3</item> 80 <item>4</item> 81 <item style="height: 2ch">5 5</item> 82 83 <item class="hidden" style="grid-area: 4/2">0 0</item> 84 </grid> 85 86 <grid> 87 <item>1</item> 88 <item>2 2</item> 89 <item style="grid-column: span 2">3 3</item> 90 <item>4</item> 91 <item style="height:2ch; grid-row:2">5 5</item> 92 93 <item class="hidden" style="grid-column: 2; grid-row: 1">0 0</item> 94 <item class="hidden" style="grid-column: 2; grid-row: 4">0 0</item> 95 </grid> 96 97 <grid> 98 <item>1</item> 99 <item>2 2</item> 100 <item>3 3</item> 101 <item>4</item> 102 <item style="height:4ch; grid-row:2/span 2">5 5</item> 103 104 <item class="hidden" style="grid-column: 2; grid-row: 1">0 0</item> 105 <item class="hidden" style="grid-column: 2; grid-row: 4">0 0</item> 106 </grid> 107 108 <grid> 109 <item>1</item> 110 <item>2 2</item> 111 <item>3 3</item> 112 <item>4</item> 113 <item style="grid-row:2/span 2">5 5</item> 114 <item style="height:5ch; grid-row:span 3/4">6</item> 115 116 <item class="hidden" style="grid-column: 2; grid-row: 1">0 0</item> 117 <item class="hidden" style="grid-column: 2; grid-row: 4">0 0</item> 118 </grid> 119 120 <grid> 121 <item>1</item> 122 <item>2 2</item> 123 <item>3 3</item> 124 <item>4</item> 125 <item style="height:3ch; grid-row:span 2/4">5</item> 126 <item style="height:5ch; grid-row:1/span 3">6</item> 127 128 <item class="hidden" style="grid-column: 2; grid-row: 1">0 0</item> 129 <item class="hidden" style="grid-column: 2; grid-row: 4">0 0</item> 130 </grid> 131 132 <grid> 133 <item style="height: 3ch">1</item> 134 <item>2 2</item> 135 <item>3 3</item> 136 <item style="height: 3ch">4</item> 137 <item style="grid-column: 2; grid-row: span 4;">5 5</item> 138 </grid> 139 140 <grid> 141 <item style="height: 3ch">1</item> 142 <item>2 2</item> 143 <item>3 3</item> 144 <item style="height: 3ch">4</item> 145 <item style="grid-column: 2; grid-row: span 4; height: 6ch">5 5</item> 146 147 </grid> 148 149 <grid> 150 <item style="height: 3ch">1</item> 151 <item>2 2</item> 152 <item>3 3</item> 153 <item style="height: 3ch">4</item> 154 <item style="grid-column: 2; grid-row: span 3; height: 6ch">5 5</item> 155 156 </grid> 157 </section> 158 </body>