vlr-grid-placement-auto-row-sparse-001.html (2381B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title></title> 5 <style type="text/css"> 6 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } 7 html { 8 writing-mode: vertical-lr; 9 text-orientation: sideways-right; 10 } 11 12 .grid { 13 display: grid; 14 border: 2px solid green; 15 grid-template-columns: 20px 20px 20px 20px; 16 grid-template-rows: 20px 20px 20px; 17 grid-auto-flow: row; 18 grid-auto-columns: 20px; 19 grid-auto-rows: 20px; 20 } 21 22 span { 23 background: lime; 24 border: 1px solid; 25 } 26 27 .test1 .a { 28 grid-row: 1; 29 grid-column: 2 / span 1; 30 } 31 .test1 .b { 32 grid-row: 2; 33 grid-column: 2 / span 3; 34 } 35 .test1 .c, .test2 .c { 36 grid-row: 1 / span 2; 37 grid-column: auto / span 3; 38 } 39 40 .test2 .a { 41 grid-row: 1; 42 grid-column: 2 / span 3; 43 } 44 .test2 .b { 45 grid-row: 2; 46 grid-column: 2 / span 1; 47 } 48 49 .test3 { 50 grid-template-areas: 51 'a a a . ' 52 'a a a . ' 53 '. b b . ' 54 ; 55 } 56 .test3 .a { 57 grid-area: a; 58 } 59 .test3 .b { 60 grid-column: 2 / span 3; 61 grid-row: b; 62 } 63 .test3 .c { 64 grid-row: auto / span 2; 65 grid-column: auto / span 3; 66 } 67 68 .test4 .c { 69 grid-row: auto / span 2; 70 grid-column: auto / span 3; 71 } 72 73 .test5 .c { 74 grid-row-start: 2; 75 grid-column: auto / span 3; 76 } 77 78 .test6 { 79 grid-row-start: 2; 80 grid-column: auto / span X; 81 } 82 83 .e { 84 grid-row-start: 2; 85 grid-column: auto / span 1; 86 } 87 </style> 88 </head> 89 <body> 90 91 <div class="grid test1"> 92 <span class="a">a</span> 93 <span class="b">b</span> 94 <span class="c">c</span> 95 <span class="d">d</span> 96 <span class="d">D</span> 97 <span class="e">e</span> 98 </div> 99 100 <div class="grid test2"> 101 <span class="a">a</span> 102 <span class="b">b</span> 103 <span class="c">c</span> 104 <span class="d">d</span> 105 <span class="d">D</span> 106 <span class="e">e</span> 107 </div> 108 109 <div class="grid test3"> 110 <span class="a">a</span> 111 <span class="b">b</span> 112 <span class="c">c</span> 113 <span class="d">d</span> 114 <span class="d">D</span> 115 <span class="e">e</span> 116 </div> 117 118 <div class="grid test4"> 119 <span class="c">c</span> 120 <span class="d">d</span> 121 <span class="d">D</span> 122 <span class="e">e</span> 123 </div> 124 125 <div class="grid test5"> 126 <span class="c">c</span> 127 <span class="d">d</span> 128 <span class="d">D</span> 129 <span class="e">e</span> 130 </div> 131 132 <div class="grid test1"> 133 <span class="a">a</span> 134 <span class="b">b</span> 135 <span class="c">c</span> 136 <span class="test6">d</span> 137 <span class="test6">D</span> 138 <span class="e">e</span> 139 </div> 140 141 </body> 142 </html>