grid-longitudinal-002.html (1420B)
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 longitudinal properties</title> 7 <style> 8 html,body { 9 color:black; background-color:white; font:20px/1 monospace; 10 } 11 12 @keyframes lat { 13 0%, 33% { column-rule-lateral-inset-start: 0px; row-rule-lateral-inset-end: 0px; } 14 33%, 50% { column-rule-lateral-inset-start: calc(100% - 6px); row-rule-lateral-inset-end: calc(100% - 6px); } 15 50%, 100% { column-rule-lateral-inset-start: 0px; row-rule-lateral-inset-end: 0; } 16 } 17 18 .grid { 19 display: inline-grid; 20 grid-template-columns: repeat(3, 50px); 21 gap: 10px; 22 width: 250px; 23 height: 200px; 24 place-content: space-around; 25 26 animation: lat 5s infinite; 27 28 column-rule: 6px solid blue; 29 column-rule-align: rule; 30 column-rule-longitudinal-inset: 3px; 31 column-rule-edge-align: gap-over; 32 column-rule-longitudinal-edge-inset: 10px; 33 34 row-rule: 6px solid purple; 35 row-rule-align: rule; 36 row-rule-edge-align: gap-over; 37 row-rule-longitudinal-inset: 1px; 38 row-rule-longitudinal-edge-inset: -2px; 39 row-rule-extent: long; 40 41 border: 2px solid; 42 margin-right: 15px; 43 margin-bottom: 30px; 44 background: lightgrey; 45 } 46 47 x { 48 block-size: 48px; 49 background: grey; 50 } 51 x:nth-child(2), x:nth-child(6) { 52 grid-column: span 2; 53 } 54 55 </style> 56 57 <div class="grid"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div>