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