multicol-row-rule-001.html (2532B)
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 column and row rules in a multi-column container</title> 7 <style> 8 html,body { 9 color:black; background-color:white; font:10px/1 monospace; 10 } 11 12 .columns { 13 column-width: 6ch; 14 gap: 16px 10px; 15 16 column-rule: 4px solid blue; 17 row-rule: 4px solid purple; 18 row-rule-align: rule; 19 20 inline-size: 30ch; 21 background: lightgrey; 22 } 23 .test1 { row-rule-extent: short; } 24 .test2 { row-rule-extent: long; } 25 .test3 { row-rule-extent: start; } 26 .test4 { row-rule-extent: end; } 27 .test5 { row-rule-extent: all-short; } 28 .test6 { row-rule-extent: all-start; } 29 .test7 { row-rule-extent: all-end; } 30 .test8 { block-size: calc(32px + 3em); row-rule-extent: all-long; } 31 .test9 { block-size: calc(32px + 3em); row-rule-extent: long; } 32 33 x,a { 34 display: block; 35 background: grey; 36 } 37 a { column-span: all; } 38 39 wrapper { 40 position: relative; 41 display: inline-block; 42 margin-bottom: 2.5em; 43 } 44 wrapper::after { 45 position: absolute; 46 bottom: -1.5em; 47 font-size: 10px; 48 vertical-align: top; 49 content: attr(test); 50 white-space: pre; 51 } 52 </style> 53 <wrapper><div class="columns test1"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper> 54 <wrapper><div class="columns test2"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper><br> 55 <wrapper><div class="columns test3"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper> 56 <wrapper><div class="columns test4"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper><br> 57 <wrapper><div class="columns test5"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper> 58 <wrapper><div class="columns test6"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper><br> 59 <wrapper><div class="columns test7"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper> 60 <wrapper><div class="columns test8"><x>1</x><x>2</x><a>column-span: all</a><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div></wrapper><br> 61 <wrapper><div class="columns test9"><x>1</x><x>2</x><a>column-span: all</a><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div></wrapper><br> 62 63 <script> 64 window.onload = function() { 65 [...document.querySelectorAll('.columns')].forEach(function(elm) { 66 const cs = window.getComputedStyle(elm); 67 elm.parentNode.setAttribute("test", 68 "row-rule-extent: " + cs.rowRuleExtent 69 ); 70 }); 71 } 72 </script>