tor-browser

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

grid-lateral-001.html (2231B)

      1 <!doctype html>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <title>Examples of rule lateral properties</title>
      7 <style>
      8 html,body {
      9  color:black; background-color:white; font:20px/1 monospace;
     10 }
     11 
     12 .grid {
     13  position: relative;
     14  display: inline-grid;
     15  grid-template-columns: auto auto;
     16  gap: 4px 16px;
     17 
     18  column-rule: 8px solid blue;
     19 
     20  row-rule: 2px solid purple;
     21  row-rule-align: rule;
     22  row-rule-extent: end;
     23  row-rule-longitudinal-inset: 2px;
     24 
     25  border: 5px solid;
     26  margin-right: 15px;
     27  margin-bottom: 30px;
     28  background: lightgrey;
     29  padding: 10px;
     30 }
     31 
     32 x {
     33  inline-size: 50px;
     34  block-size: 1.5em;
     35  background: grey;
     36 }
     37 
     38 .test1 {
     39  column-rule-width: auto;
     40  column-rule-lateral-inset: 2px 6px;
     41 }
     42 .test2 {
     43  column-rule-width: auto;
     44  column-rule-lateral-inset: auto 3px;
     45 }
     46 .test3 {
     47  column-rule-width: auto;
     48  column-rule-lateral-inset: auto;
     49 }
     50 .test4 {
     51  column-rule-width: 2px;
     52  column-rule-lateral-inset: 3px auto;
     53 }
     54 .test5 {
     55  column-rule-width: 2px;
     56  column-rule-lateral-inset: 10px 100px;
     57 }
     58 .test6 {
     59  column-rule-width: auto;
     60  column-rule-lateral-inset: 12px 100px;
     61 }
     62 .test7 {
     63  column-rule-width: auto;
     64  column-rule-lateral-inset: auto 30px;
     65 }
     66 
     67 .grid::after {
     68  position: absolute;
     69  width: 200px;
     70  bottom: -2em;
     71  content: attr(test);
     72  font-size: 10px;
     73 }
     74 pre {
     75  font-size: 10px;
     76 }
     77 </style>
     78 
     79 <pre>
     80 The triplet of values below each grid container are:
     81 column-rule-lateral-inset-start, column-rule-width, column-rule-lateral-inset-end
     82 </pre>
     83 <div class="grid test1"><x>1</x><x>2</x></div>
     84 <div class="grid test2"><x>1</x><x>2</x></div>
     85 <div class="grid test3"><x>1</x><x>2</x></div><br>
     86 <div class="grid test4"><x>1</x><x>2</x></div>
     87 <div class="grid test5"><x>1</x><x>2</x></div><br>
     88 <div class="grid test6"><x>1</x><x>2</x><x>3</x><x>4</x></div>
     89 <div class="grid test7"><x>1</x><x>2</x><x>3</x><x>4</x></div>
     90 
     91 
     92 <script>
     93 window.onload = function() {
     94  [...document.querySelectorAll('.grid')].forEach(function(elm) {
     95    const cs = window.getComputedStyle(elm);
     96    elm.setAttribute("test", 
     97      cs.columnRuleLateralInsetStart + ", " +
     98      cs.columnRuleWidth + ", " +
     99      cs.columnRuleLateralInsetEnd
    100    );
    101  });
    102 }
    103 </script>