grid-lanes-intrinsic-sizing-rows-004-mix1-ref.html (3676B)
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: 1fr 2fr min-content max-content; 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 font-size: 15px; 26 } 27 28 item { 29 justify-self: start; 30 writing-mode: vertical-rl; 31 text-orientation: sideways; 32 } 33 .hidden { 34 visibility: hidden; 35 opacity: 0.5; 36 width: 1em; 37 } 38 39 grid > item:nth-child(1) { 40 background-color: #89CFF0; 41 } 42 43 grid > item:nth-child(2) { 44 background-color: #FF6F61; 45 } 46 47 grid > item:nth-child(3) { 48 background-color: #FDF3E7; 49 } 50 51 grid > item:nth-child(4) { 52 background-color: #F4C542; 53 } 54 55 grid > item:nth-child(5) { 56 background-color: #333333; 57 } 58 59 grid > item:nth-child(6) { 60 background-color: #B2C8A5; 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 style="grid-column: span 2; min-height: 2ch">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 style="grid-column: span 2; min-height: 2ch">3 3</item> 81 <item>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 style="grid-column: span 2">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-area: 1/2">0 0</item> 95 <item class="hidden" style="grid-area: 4/2">0 0</item> 96 </grid> 97 98 <grid style="grid-template-columns: 30px auto;"> 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-area: 1/2">0 0</item> 106 <item class="hidden" style="grid-area: 4/2">0 0</item> 107 </grid> 108 109 <grid style="grid-template-columns: 30px auto;"> 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-area: 1/2">0 0</item> 118 <item class="hidden" style="grid-area: 4/2">0 0</item> 119 </grid> 120 121 <grid style="grid-template-columns: 30px auto;"> 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-area: 1/2">0 0</item> 130 <item class="hidden" style="grid-area: 4/2">0 0</item> 131 </grid> 132 133 <grid style="grid-template-columns: 30px auto;"> 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-row:span 4">5 5</item> 139 </grid> 140 141 <grid style="grid-template-columns: 30px auto;"> 142 <item style="height: 3ch">1</item> 143 <item>2 2</item> 144 <item>3 3</item> 145 <item style="height: 3ch">4</item> 146 <item style="height: 6ch; grid-row:span 4">5 5</item> 147 </grid> 148 149 <grid style="grid-template-columns: 30px auto;"> 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="height: 6ch; grid-row:span 3">5 5</item> 155 </grid> 156 </section>