tor-browser

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

grid-lanes-intrinsic-sizing-cols-005.html (1673B)


      1 <!DOCTYPE HTML>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <html>
      7  <meta charset="utf-8">
      8  <title>CSS Grid Test: Grid Lanes layout row sizing (vertical writing mode)</title>
      9  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
     10  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
     11  <link rel="match" href="grid-lanes-intrinsic-sizing-cols-005-ref.html">
     12  <style>
     13 
     14 @import "support/grid-lanes-intrinsic-sizing-visual.css";
     15 
     16 grid {
     17  display: inline-grid-lanes;
     18  gap: 1px 2px;
     19  grid-template-columns: repeat(4,auto);
     20  border: 1px solid;
     21  padding: 0 1px 0 2px;
     22  vertical-align: top;
     23 }
     24 
     25 item {
     26  writing-mode: vertical-lr;
     27 }
     28 </style>
     29 
     30 <body>
     31 
     32 <grid title="First item 3ch">
     33  <item style="width:3ch">1</item>
     34  <item>2</item>
     35  <item>3</item>
     36  <item>4</item>
     37  <item>5 5</item>
     38  <item>6</item>
     39  <item>7</item>
     40  <item>8</item>
     41  <item>9 9</item>
     42 </grid>
     43 
     44 <grid title="Fifth item 3ch">
     45  <item>1</item>
     46  <item>2</item>
     47  <item>3</item>
     48  <item>4</item>
     49  <item style="width:3ch">5 5</item>
     50  <item>6</item>
     51  <item>7</item>
     52  <item>8</item>
     53  <item>9 9</item>
     54 </grid>
     55 
     56 <grid title="Fifth item 3ch row 1">
     57  <item>1</item>
     58  <item>2</item>
     59  <item>3</item>
     60  <item>4</item>
     61  <item style="width:3ch; grid-column:1">5 5</item>
     62  <item>6</item>
     63  <item>7</item>
     64  <item>8</item>
     65  <item>9 9</item>
     66 </grid>
     67 
     68 <grid title="Fifth item 3ch col 1 (ignored)">
     69  <item>1</item>
     70  <item>2</item>
     71  <item>3</item>
     72  <item>4</item>
     73  <item style="width:3ch; grid-row:1">5 5</item>
     74  <item>6</item>
     75  <item>7</item>
     76  <item>8</item>
     77  <item>9 9</item>
     78 </grid>