<!DOCTYPE html>
<!-- This is a reference case for a "9-pages-per-sheet" scenario. This file is
     a mockup of a sheet with 9 pages, with the pages all having a 0.2x scale
     scale factor applied. (We end up with that scale factor by subtracting the
     requested unwriteable margins from the sheet, and dividing up the
     remaining space equally among the "virtual pages".)  -->
<style>
html {
  display: flex;
  height: 100%;
  margin: 0;
}
body {
  /* As a flex item (a child of the html element), fill the available area. */
  flex: 1;

  /* We lay out the body as a column-oriented flex container (whose children,
     in turn, are rows). */
  display: flex;
  flex-direction: column;

  /* These values come directly from the unwriteableMargin values in the
     testcase's configuration code in printpreview_helper.xhtml. */
  margin-top: 0.2in;
  margin-right: 0.8in;
  margin-bottom: 0.4in;
  margin-left: 1.2in;
}

.row {
  /* Give each row an equal share of the available height: */
  flex: 1;

  /* ...and render them as row-oriented (by default) flex containers: */
  display: flex;
}

.swatch {
  box-sizing: border-box;

  /* These represent the 120px borders in the testcase, scaled down 0.2x: */
  border: 24px solid;

  /* Share the width equally among the swatches. (The height will be
     automatically set to the flex container's row height, via default
     'align-self' behavior.) */
  flex: 1;

  /* These values come directly from the unwriteableMargin values in the
     testcase's configuration code in printpreview_helper.xhtml, with
     each measurement scaled down by exactly 0.2x. The extra 0.5667in accounts
     for the centering of each page in its grid cell. */
  margin-top: calc(0.04in + 0.5667in);
  margin-right: 0.16in;
  margin-bottom: calc(0.08in + 0.5667in);
  margin-left: 0.24in;
}
.row:nth-child(1) > .swatch:nth-child(1) { border-color: cyan; }
.row:nth-child(1) > .swatch:nth-child(2) { border-color: yellow; }
.row:nth-child(1) > .swatch:nth-child(3) { border-color: pink; }
.row:nth-child(2) > .swatch:nth-child(1) { border-color: orange; }
.row:nth-child(2) > .swatch:nth-child(2) { border-color: purple; }
.row:nth-child(2) > .swatch:nth-child(3) { border-color: olive; }
.row:nth-child(3) > .swatch:nth-child(1) { border-color: blue; }
.row:nth-child(3) > .swatch:nth-child(2) { border-color: tan; }
.row:nth-child(3) > .swatch:nth-child(3) { border-color: fuchsia; }
</style>
<div class="row">
  <div class="swatch"></div>
  <div class="swatch"></div>
  <div class="swatch"></div>
</div>
<div class="row">
  <div class="swatch"></div>
  <div class="swatch"></div>
  <div class="swatch"></div>
</div>
<div class="row">
  <div class="swatch"></div>
  <div class="swatch"></div>
  <div class="swatch"></div>
</div>