grid-item-minmax-img-002-ref.html (837B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 - https://creativecommons.org/publicdomain/zero/1.0/ --> 4 <meta charset="utf-8"> 5 <title>Reference: Test how images are stretched with different align/justify flags.</title> 6 <link rel="author" href="mailto:emcdonough@mozilla.com"> 7 <style> 8 .grid { 9 display: inline-grid; 10 grid-template-columns: 4px; 11 grid-template-rows: 4px; 12 border: 5px solid goldenrod; 13 } 14 .spacer{ 15 height: 10px; 16 } 17 .img{ 18 background-image: url("support/100x100-green.png"); 19 width: 100px; 20 height: 100px; 21 } 22 .img, .empty{ 23 border: 2px solid indigo; 24 } 25 </style> 26 <div class="grid"> 27 <div class="img"></div> 28 </div> 29 <div class="spacer"></div> 30 <div class="grid"> 31 <div class="empty"></div> 32 </div> 33 <div class="spacer"></div> 34 <div class="grid"> 35 <div class="img"></div> 36 </div>