grid-align-001.html (2200B)
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 'row-rule-align' values.</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: 1ch 2ch 2ch; 16 gap: 10px 30px; 17 block-size: calc(2em + 30px); 18 inline-size: calc(10ch + 30px); 19 place-content: center; 20 21 column-rule: 6px solid cyan; 22 column-rule-extent: all-long; 23 column-rule-lateral-inset-start: 20%; 24 25 row-rule: 6px solid purple; 26 row-rule-longitudinal-inset: 1px; 27 28 border: 2px solid; 29 margin-right: 15px; 30 margin-bottom: 30px; 31 background: lightgrey; 32 } 33 34 .test1 { row-rule-align: gap-center; } 35 .test2 { row-rule-align: gap gap-over; } 36 .test3 { row-rule-align: rule; } 37 .test4 { row-rule-align: rule-center; } 38 .test5 { row-rule-align: gap rule-over; } 39 .test6 { row-rule-align: gap-over gap; } 40 41 x { 42 background: grey; 43 } 44 x:nth-child(3) { 45 grid-row: span 2; 46 } 47 48 .grid::after { 49 position: absolute; 50 bottom: -1.5em; 51 width: 400px; 52 font-size: 10px; 53 vertical-align: top; 54 content: attr(test); 55 } 56 pre { font-size: 10px; } 57 </style> 58 59 <pre>Note that the row rules all have a 1px longitudinal inset 60 to separate the individual rule segments. ('rule-center', 61 for example, would otherwise look like one long rule) 62 63 Note also that the column rule is intentionally not centered in 64 the gap (to separate 'rule-center' from 'gap-center'). 65 </pre> 66 67 <div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> 68 <div class="grid test2"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br> 69 <div class="grid test3"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> 70 <div class="grid test4"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br> 71 <div class="grid test5"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div> 72 <div class="grid test6"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br> 73 74 <script> 75 window.onload = function() { 76 [...document.querySelectorAll('div')].forEach(function(elm) { 77 const cs = window.getComputedStyle(elm); 78 elm.setAttribute("test", 79 "row-rule-align:" + cs.rowRuleAlign 80 ); 81 }); 82 } 83 </script>