grid-gradient-002.html (1302B)
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 image properties</title> 7 8 <style> 9 html,body { 10 color:black; background-color:white; font:20px/1 monospace; 11 } 12 13 @keyframes w { 14 0%, 33% { width:180px } 15 33%, 50% { width:400px } 16 50%, 100% { width:180px } 17 } 18 @keyframes h { 19 0%, 33% { height:150px } 20 33%, 50% { height:300px } 21 50%, 100% { height:150px } 22 } 23 24 .grid { 25 display: inline-grid; 26 grid-template-columns: repeat(3, 50px); 27 width: 200px; 28 height: 240px; 29 place-content: space-around; 30 31 animation: w 5s infinite, h 5s infinite; 32 33 column-rule: min(100%, max(16px, 50%)) solid; 34 column-rule-image: linear-gradient(#f008,#fc08); 35 column-rule-align: rule; 36 column-rule-extent: all-long; 37 38 row-rule: min(16px, 100%) solid; 39 row-rule-image: url(h-diagonal-blue-16.png) 16 space; 40 row-rule-image: linear-gradient(90deg,#f008,#fc08); 41 row-rule-align: rule; 42 row-rule-extent: long; 43 44 border: 2px solid; 45 margin-right: 15px; 46 margin-bottom: 30px; 47 background: lightgrey; 48 } 49 50 x { 51 block-size: 48px; 52 background: grey; 53 } 54 x:nth-child(2), x:nth-child(6) { 55 grid-column: span 2; 56 } 57 58 </style> 59 60 <div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div>