| <!DOCTYPE html> |
| <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> |
| <style> |
| @page { |
| margin: 0; |
| size: 500px 400px; |
| } |
| body { |
| display: grid; |
| grid-template-columns: 100px auto 100px; |
| grid-template-rows: 100px auto 100px; |
| height: 100vh; |
| margin: 0; |
| } |
| .square { |
| border: solid; |
| width: 25px; |
| height: 25px; |
| margin: 3px; |
| } |
| .square.left { |
| margin-left: auto; |
| } |
| .square.top { |
| margin-top: auto; |
| } |
| .vertical-edge { |
| display: flex; |
| justify-content: space-between; |
| } |
| .horizontal-edge { |
| display: flex; |
| flex-flow: column; |
| justify-content: space-between; |
| } |
| .pagearea { |
| border: solid blue; |
| padding: 8px; |
| } |
| </style> |
| |
| <div class="square left top"></div> |
| <div class="vertical-edge"> |
| <div class="square top"></div> |
| <div class="square top"></div> |
| <div class="square top"></div> |
| </div> |
| <div class="square top"></div> |
| <div class="horizontal-edge"> |
| <div class="square left"></div> |
| <div class="square left"></div> |
| <div class="square left"></div> |
| </div> |
| <div class="pagearea"> |
| There should be 16 margin boxes around this page area. Within their available |
| space, they should all be squares, and be aligned towards the center of the |
| page, with a tiny margin separating their border from the blue border. |
| </div> |
| <div class="horizontal-edge"> |
| <div class="square"></div> |
| <div class="square"></div> |
| <div class="square"></div> |
| </div> |
| <div class="square left"></div> |
| <div class="vertical-edge"> |
| <div class="square"></div> |
| <div class="square"></div> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
