tor-browser

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

grid-item-overflow-stretch-003.html (1928B)


      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: margin:auto stretch items</title>
      9  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
     10  <link rel="match" href="grid-item-overflow-stretch-003-ref.html">
     11  <style type="text/css">
     12 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
     13 
     14 .grid {
     15  display: inline-grid;
     16  width: 100px;
     17  height: 50px;
     18  grid: 7px auto 3px / 7px auto 3px;
     19  grid-gap: 5px;
     20  border:1px solid;
     21 }
     22 
     23 .grid > * {
     24  grid-area: 2/2;
     25  border:1px solid;
     26  margin: 0 auto;
     27 }
     28 .h .grid > * {
     29  margin: auto;
     30 }
     31 
     32 .m  { margin: 1px 3px 5px 7px; }
     33 
     34 x { display:block; width:110px; height:5px; background:grey; }
     35 .h .grid x { width:5px; height:110px; }
     36 
     37 br { clear:both; }
     38  </style>
     39 </head>
     40 <body>
     41 
     42 <div class="grid"><span class="oa"><x></x></span></div>
     43 <div class="grid"><span class="os"><x></x></span></div>
     44 <div class="grid"><span class="oh"><x></x></span></div>
     45 <div class="grid"><span class="  "><x></x></span></div>
     46 
     47 <br>
     48 
     49 <div class="grid"><span class="m oa"><x></x></span></div>
     50 <div class="grid"><span class="m os"><x></x></span></div>
     51 <div class="grid"><span class="m oh"><x></x></span></div>
     52 <div class="grid"><span class="m   "><x></x></span></div>
     53 
     54 <br>
     55 
     56 <div class="h">
     57 
     58 <div class="grid"><span class="oa"><x></x></span></div>
     59 <div class="grid"><span class="os"><x></x></span></div>
     60 <div class="grid"><span class="oh"><x></x></span></div>
     61 <div class="grid"><span class="  "><x></x></span></div>
     62 
     63 <br>
     64 
     65 <div class="grid"><span class="m oa"><x></x></span></div>
     66 <div class="grid"><span class="m os"><x></x></span></div>
     67 <div class="grid"><span class="m oh"><x></x></span></div>
     68 <div class="grid"><span class="m   "><x></x></span></div>
     69 
     70 <br>
     71 
     72 </div>
     73 
     74 </body>
     75 </html>