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