grid-extent-001.html (2772B)
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' on a grid container</title> 7 8 <style> 9 html,body { 10 color:black; background-color:white; font:20px/1 monospace; 11 } 12 13 .grid { 14 position: relative; 15 display: inline-grid; 16 grid: auto auto / repeat(7, 2ch); 17 gap: 10px 3px; 18 19 row-rule: 4px solid purple; 20 21 border: 2px solid; 22 margin-right: 10px; 23 margin-bottom: 30px; 24 background: lightgrey; 25 } 26 .segment { row-rule-extent: segment; } 27 .segment-allow-overlap { row-rule-extent: segment allow-overlap; } 28 .short-allow-overlap { row-rule-extent: short allow-overlap; } 29 .short { row-rule-extent: short; } 30 .long-allow-overlap { row-rule-extent: long allow-overlap; } 31 .long { row-rule-extent: long; } 32 .start { row-rule-extent: start; } 33 .end { row-rule-extent: end; } 34 .all-long-allow-overlap { row-rule-extent: all-long allow-overlap; } 35 .all-long { row-rule-extent: all-long; } 36 37 x { 38 background: grey; 39 opacity: .5; 40 } 41 x:nth-child(1) { grid-column: span 2; } 42 x:nth-child(3) { grid-row: 1 / span 2; grid-column: 4;} 43 x:nth-child(4) { grid-column: span 2; } 44 x:nth-child(6) { } 45 x:nth-child(7) { grid-row: 2; grid-column: 2 / span 3; } 46 x:nth-child(8) { grid-column: span 3; } 47 48 .grid::after { 49 position: absolute; 50 bottom: -1.5em; 51 font-size: 10px; 52 vertical-align: top; 53 content: attr(test); 54 } 55 pre { font-size: 10px; } 56 </style> 57 58 <pre>Test of various 'row-rule-extent' values:</pre> 59 60 <div class="grid segment-allow-overlap"><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> 61 <div class="grid segment"><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> 62 <div class="grid short-allow-overlap"><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 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><br> 64 <div class="grid long-allow-overlap"><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 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> 66 <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> 67 <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> 68 <div class="grid all-long-allow-overlap"><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> 69 <div class="grid all-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> 70 71 <script> 72 window.onload = function() { 73 [...document.querySelectorAll('.grid')].forEach(function(elm) { 74 const cs = window.getComputedStyle(elm); 75 elm.setAttribute("test", 76 "'" + cs.rowRuleExtent + "'" 77 ); 78 }); 79 } 80 </script>