dimensions-010-print-ref.html (1309B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 @page { 5 size: 650px 500px; 6 margin: 0; 7 } 8 :root { 9 print-color-adjust: exact; 10 } 11 body { 12 margin: 0; 13 } 14 .grid { 15 display: grid; 16 grid-template-columns: 100px auto 100px; 17 grid-template-rows: 100px auto 100px; 18 height: 100vh; 19 } 20 .vertical-edge { 21 display: flex; 22 } 23 .horizontal-edge { 24 display: flex; 25 flex-flow: column; 26 } 27 </style> 28 <div class="grid"> 29 <div class="corner"></div> 30 <div class="vertical-edge"> 31 <div style="width:150px; background:hotpink;"></div> 32 <div style="width:150px; background:cyan;"></div> 33 <div style="width:150px; background:yellow;"></div> 34 </div> 35 <div class="corner"></div> 36 <div class="horizontal-edge"> 37 <div style="height:100px; background:yellow;"></div> 38 <div style="height:100px; background:cyan;"></div> 39 <div style="height:100px; background:hotpink;"></div> 40 </div> 41 <div></div> 42 <div class="horizontal-edge"> 43 <div style="height:300px; background:cyan;"></div> 44 </div> 45 <div class="corner"></div> 46 <div class="vertical-edge"> 47 <div style="width:225px; background:hotpink;"></div> 48 <div style="width:225px; background:yellow;"></div> 49 </div> 50 <div class="corner"></div> 51 </div>