grid-placement-implicit-named-areas-001-ref.html (5397B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: implicit named areas</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215182"> 10 <style type="text/css"> 11 div { 12 display: grid; 13 grid-auto-columns: 3px; 14 grid-auto-rows: 3px; 15 border: 1px solid; 16 float: left; 17 width: 100px; 18 margin: 2px; 19 place-items: stretch; 20 place-content: start; 21 } 22 .row-tests div { 23 height: 100px; 24 } 25 span { background:lime; grid-column:A/B; grid-row:A/B; } 26 27 .col-valid { grid-template-columns:[A] 40px [] 40px [B]; } 28 .row-valid { grid-template-rows: [A] 40px [] 40px [B]; } 29 30 .col-start-1 { grid-template-columns:[A] 40px [] 40px; } 31 .row-start-1 { grid-template-rows: [A] 40px [] 40px; } 32 33 .col-end-1 { grid-template-columns:[B] 40px [] 40px; } 34 .row-end-1 { grid-template-rows: [B] 40px [] 40px; } 35 36 .col-start { grid-template-columns: 40px [A] 40px []; } 37 .row-start { grid-template-rows: 40px [A] 40px []; } 38 39 .col-end { grid-template-columns:40px [B] 40px; } 40 .row-end { grid-template-rows: 40px [B] 40px; } 41 42 .col-end-start { grid-template-columns:[B] 40px [A] 40px; } 43 .row-end-start { grid-template-rows: [B] 40px [A] 40px; } 44 45 .col-start-end-start { grid-template-columns:[A] 40px [B] 40px [A] 40px; } 46 .row-start-end-start { grid-template-rows: [A] 40px [B] 40px [A] 40px; } 47 48 .col-start-start-end { grid-template-columns:[A] 40px [A] 40px [B] 40px; } 49 .row-start-start-end { grid-template-rows: [A] 40px [A] 40px [B] 40px; } 50 51 .col-start-end-end { grid-template-columns:[A] 40px [B] 40px [B]; } 52 .row-start-end-end { grid-template-rows: [A] 40px [B] 40px [B]; } 53 54 .col-start-last { grid-template-columns: 40px [] 40px [A]; } 55 .row-start-last { grid-template-rows: 40px [] 40px [A]; } 56 57 .col-same-1 { grid-template-columns:[B A] 40px [] 40px; } 58 .row-same-1 { grid-template-rows: [B A] 40px [] 40px; } 59 60 .col-same-2 { grid-template-columns:40px [B A] 40px; } 61 .row-same-2 { grid-template-rows: 40px [B A] 40px; } 62 63 .col-same-2b { grid-template-columns:40px [A B] 40px; } 64 .row-same-2b { grid-template-rows: 40px [A B] 40px; } 65 66 .col-same-3 { grid-template-columns:40px [] 40px [B A]; } 67 .row-same-3 { grid-template-rows: 40px [] 40px [B A]; } 68 </style> 69 </head> 70 <body> 71 72 <div class="col-valid"><span></span></div> 73 <div class="col-start-1"><span></span></div> 74 <div class="col-end-1"><span></span></div> 75 <div class="col-start"><span></span></div> 76 <div class="col-end"><span></span></div> 77 <div class="col-end-start"><span></span></div> 78 <div class="col-start-end-start"><span></span></div> 79 80 <br clear="all"> 81 82 <div class="col-valid row-valid"><span></span></div> 83 <div class="col-start-1 row-valid"><span></span></div> 84 <div class="col-end-1 row-valid"><span></span></div> 85 <div class="col-start row-valid"><span></span></div> 86 <div class="col-end row-valid"><span></span></div> 87 <div class="col-end-start row-valid"><span></span></div> 88 <div class="col-start-end-start row-valid"><span></span></div> 89 90 <br clear="all"> 91 92 <div class="col-start-start-end"><span></span></div> 93 <div class="col-start-end-end"><span></span></div> 94 <div class="col-start-last"><span></span></div> 95 <div class="col-same-1"><span></span></div> 96 <div class="col-same-2"><span></span></div> 97 <div class="col-same-2b"><span></span></div> 98 <div class="col-same-3"><span></span></div> 99 100 <br clear="all"> 101 102 <div class="col-start-start-end row-valid"><span></span></div> 103 <div class="col-start-end-end row-valid"><span></span></div> 104 <div class="col-start-last row-valid"><span></span></div> 105 <div class="col-same-1 row-valid"><span></span></div> 106 <div class="col-same-2 row-valid"><span></span></div> 107 <div class="col-same-2b row-valid"><span></span></div> 108 <div class="col-same-3 row-valid"><span></span></div> 109 110 <br clear="all"> 111 112 <x class="row-tests"> 113 114 <div class="row-valid"><span></span></div> 115 <div class="row-start-1"><span></span></div> 116 <div class="row-end-1"><span></span></div> 117 <div class="row-start"><span></span></div> 118 <div class="row-end"><span></span></div> 119 <div class="row-end-start"><span></span></div> 120 <div class="row-start-end-start"><span></span></div> 121 122 <br clear="all"> 123 124 <div class="row-valid col-valid"><span></span></div> 125 <div class="row-start-1 col-valid"><span></span></div> 126 <div class="row-end-1 col-valid"><span></span></div> 127 <div class="row-start col-valid"><span></span></div> 128 <div class="row-end col-valid"><span></span></div> 129 <div class="row-end-start col-valid"><span></span></div> 130 <div class="row-start-end-start col-valid"><span></span></div> 131 132 <br clear="all"> 133 134 <div class="row-start-start-end"><span></span></div> 135 <div class="row-start-end-end"><span></span></div> 136 <div class="row-start-last"><span></span></div> 137 <div class="row-same-1"><span></span></div> 138 <div class="row-same-2"><span></span></div> 139 <div class="row-same-2b"><span></span></div> 140 <div class="row-same-3"><span></span></div> 141 142 <br clear="all"> 143 144 <div class="row-start-start-end col-valid"><span></span></div> 145 <div class="row-start-end-end col-valid"><span></span></div> 146 <div class="row-start-last col-valid"><span></span></div> 147 <div class="row-same-1 col-valid"><span></span></div> 148 <div class="row-same-2 col-valid"><span></span></div> 149 <div class="row-same-2b col-valid"><span></span></div> 150 <div class="row-same-3 col-valid"><span></span></div> 151 152 </x> 153 154 </body> 155 </html>