tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

grid-placement-definite-002.html (1980B)

      1 <!DOCTYPE HTML>
      2 <html><head>
      3    <meta charset="utf-8">
      4    <title></title>
      5    <style type="text/css">
      6 html,body {
      7  font-size:12px;
      8  font-family:monospace;
      9 }
     10 .grid {
     11  display: grid;
     12  border: 1px solid green;
     13  grid-template-columns: 20px 20px 20px 20px;
     14  grid-template-rows: 20px 20px 20px;
     15  grid-auto-flow: row;
     16  grid-auto-columns: 20px;
     17  grid-auto-rows: 20px;
     18 }
     19 
     20 span {
     21  background: lime;
     22  border: 1px solid;
     23 }
     24 
     25 .test1 { grid-template-areas:'. a a-start .'; }
     26 .test1 span { grid-column: a-start / 8; }
     27 
     28 .test2 {
     29  grid-template-areas:
     30    'a a a . . .'
     31    'a a a . . .'
     32    '. b b . . .'
     33  ;
     34 }
     35 
     36 .test2 .a {
     37  grid-area: a;
     38 }
     39 .test2 .b {
     40  grid-column: 2 / span 3; 
     41  grid-row: b;
     42 }
     43 .test2 .c {
     44  grid-column: auto / span 3;
     45 }
     46 
     47 .test3 {
     48  grid-template-areas:'. a .';
     49  grid-template-columns: [a-start] 20px 20px [a-start-start] 20px [a-start-end];
     50 }
     51 .test3 span { grid-column: a-start / 8; }
     52 
     53 .test4, .test5 {
     54  grid-template-areas:'. . . a';
     55  grid-template-columns: 20px [a-start] 20px [a-start] 20px [a-end] 20px ;
     56 }
     57 .test4 span { grid-column: a-start 2 / 8; }
     58 .test5 span { grid-column: a / 8; }
     59 
     60 .test6 #span1 { grid-row:1/2; grid-column:1/2; }
     61 .test6 #span2 { grid-row:1/2; grid-column:1/2; }
     62 
     63 .test7 {grid-template-columns: 700px; grid-template-rows: 60px; }
     64 .test7 #span1 { grid-area: 1/1; background: red;  border: 4px solid red; color:red; }
     65 .test7 #span2 { grid-area: 1/1; background: lime; padding: 3px; margin:0; }
     66 
     67    </style>
     68 </head>
     69 <body>
     70 
     71 <div class="grid test1"><span>a</span></div>
     72 
     73 <div class="grid test2">
     74 <span class="a">a</span>
     75 <span class="b">b</span>
     76 <span class="c">c</span>
     77 </div>
     78 
     79 <div class="grid test3"><span>a</span></div>
     80 
     81 <div class="grid test4"><span>a</span></div>
     82 
     83 <div class="grid test5"><span>a</span></div>
     84 
     85 <div class="grid test6"><span id="span1">a</span><span id="span2">b</span></div>
     86 
     87 <div class="grid test7"><span id="span1">FAIL</span><span id="span2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid</span></div>
     88 
     89 </body>
     90 </html>