grid-masonry-001.html (2376B)
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-rule-extent' values in a Masonry grid layout.</title> 7 <style> 8 .grid { 9 position: relative; 10 display: inline-grid; 11 grid: masonry / 3ch 4ch 5ch; 12 gap: 20px; 13 margin-right: 20px; 14 margin-bottom: 40px; 15 background: lightgrey; 16 17 block-size: 160px; 18 align-content: center; 19 20 column-rule: solid blue; 21 column-rule-align: rule; 22 column-rule-edge-align: gap-over; 23 row-rule: 6px solid purple; 24 row-rule-extent: all-long; 25 } 26 .segment { column-rule-extent: segment; } 27 .segment-allow-overlap { column-rule-extent: segment allow-overlap; } 28 .short-allow-overlap { column-rule-extent: short allow-overlap; } 29 .short { column-rule-extent: short; } 30 .long-allow-overlap { column-rule-extent: long allow-overlap; } 31 .long { column-rule-extent: long; } 32 .start { column-rule-extent: start; } 33 .end { column-rule-extent: end; } 34 .all-long-allow-overlap { column-rule-extent: all-long allow-overlap; } 35 .all-long { column-rule-extent: all-long; } 36 37 x { 38 background: grey; 39 opacity: 0.5; 40 } 41 x:nth-child(1) { padding-block-start: 30px; } 42 x:nth-child(2) { grid-column:span 2 } 43 x:nth-child(3) { padding-block-end: 20px; } 44 x:nth-child(7) { grid-column: span 2; } 45 x:nth-child(8) { padding-block-end: 10px; } 46 47 .grid::after { 48 position: absolute; 49 bottom: -3em; 50 font-size: 10px; 51 font-style: italic; 52 vertical-align: top; 53 content: attr(test); 54 white-space: pre; 55 } 56 pre { font-size: 10px; } 57 </style> 58 59 <pre>All have <i>'column-rule-edge-align: gap-over'</i> to extend 60 the edge rules out to the content-box edge.</pre> 61 62 <div class="grid short"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div> 63 <div class="grid long"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br> 64 <div class="grid start"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div> 65 <div class="grid end"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br> 66 67 <script> 68 window.onload = function() { 69 [...document.querySelectorAll('.grid')].forEach(function(elm) { 70 const cs = window.getComputedStyle(elm); 71 elm.setAttribute("test", 72 "'column-rule-extent: " + cs.columnRuleExtent + "' \n" + 73 "'column-rule-align: " + cs.columnRuleAlign + "'" 74 ); 75 }); 76 } 77 </script>