tor-browser

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

grid-lanes-item-placement-003-ref.html (862B)


      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: Grid Lanes layout using `grid-column/row` and `dense`</title>
      9  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
     10  <style>
     11 html,body {
     12  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
     13 }
     14 
     15 grid {
     16  display: inline-grid;
     17  gap: 10px 20px;
     18  grid-auto-columns: 80px;
     19  color: #444;
     20  border: 1px solid;
     21  padding: 2px;
     22 }
     23 
     24 item {
     25  background-color: #444;
     26  color: #fff;
     27  padding: 20px;
     28  margin: 3px;
     29  border: 5px solid blue;
     30 }
     31 </style>
     32 </head>
     33 <body>
     34 
     35 <grid>
     36  <item>1</item>
     37  <item>3</item>
     38  <item>2</item>
     39  <item style="grid-column:span 3">4</item>
     40  <item>5</item>
     41  <item>6</item>
     42 </grid>
     43 
     44 </body>
     45 </html>