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