overconstrained-001-print-ref.html (1641B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 @page { 5 margin: 0; 6 size: 500px 400px; 7 } 8 body { 9 display: grid; 10 grid-template-columns: 100px auto 100px; 11 grid-template-rows: 100px auto 100px; 12 height: 100vh; 13 margin: 0; 14 } 15 .square { 16 border: solid; 17 width: 25px; 18 height: 25px; 19 margin: 3px; 20 } 21 .square.left { 22 margin-left: auto; 23 } 24 .square.top { 25 margin-top: auto; 26 } 27 .vertical-edge { 28 display: flex; 29 justify-content: space-between; 30 } 31 .horizontal-edge { 32 display: flex; 33 flex-flow: column; 34 justify-content: space-between; 35 } 36 .pagearea { 37 border: solid blue; 38 padding: 8px; 39 } 40 </style> 41 42 <div class="square left top"></div> 43 <div class="vertical-edge"> 44 <div class="square top"></div> 45 <div class="square top"></div> 46 <div class="square top"></div> 47 </div> 48 <div class="square top"></div> 49 <div class="horizontal-edge"> 50 <div class="square left"></div> 51 <div class="square left"></div> 52 <div class="square left"></div> 53 </div> 54 <div class="pagearea"> 55 There should be 16 margin boxes around this page area. Within their available 56 space, they should all be squares, and be aligned towards the center of the 57 page, with a tiny margin separating their border from the blue border. 58 </div> 59 <div class="horizontal-edge"> 60 <div class="square"></div> 61 <div class="square"></div> 62 <div class="square"></div> 63 </div> 64 <div class="square left"></div> 65 <div class="vertical-edge"> 66 <div class="square"></div> 67 <div class="square"></div> 68 <div class="square"></div> 69 </div> 70 <div class="square"></div>