Card Print Layout

by Taylor Lopez

HTML

<div id="front-page-print">
  <div id="front-page" class="page">
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="guide hguide hguide0"></div>
    <div class="guide hguide hguide1"></div>
    <div class="guide hguide hguide2"></div>
    <div class="guide hguide hguide3"></div>
    <div class="guide vguide vguide0"></div>
    <div class="guide vguide vguide1"></div>
    <div class="guide vguide vguide2"></div>
    <div class="guide vguide vguide3"></div>
  </div>
</div>

<div id="back-page-print">
  <div id="back-page" class="page">
    <div class="card card-back"></div>
    <div class="card card-back"></div>
    <div class="card card-back"></div>
    <div class="card card-back"></div>
    <div class="card card-back"></div>
    <div class="card card-back"></div>
    <div class="card card-back"></div>
    <div class="card card-back"></div>
    <div class="card card-back"></div>
    <div class="guide hguide hguide0"></div>
    <div class="guide hguide hguide1"></div>
    <div class="guide hguide hguide2"></div>
    <div class="guide hguide hguide3"></div>
    <div class="guide vguide vguide0"></div>
    <div class="guide vguide vguide1"></div>
    <div class="guide vguide vguide2"></div>
    <div class="guide vguide vguide3"></div>
  </div>
</div>

<input type="button" onclick="printDiv('front-page-print');" value="Print Front" />
<input type="button" onclick="printDiv('back-page-print');" value="Print Back" />

CSS

html, body
		{
		  padding: 0;
		  margin: 0;
		}

		.guide
		{
		  background-color: red;
		  position: absolute;
		}

		.hguide
		{
		  width: 100%;
		  height: 1px;
		  left: 0;
		}

		.vguide
		{
		  width: 1px;
		  height: 100%;
		  top: 0;
		}

		.hguide0{ top: 2.2727%; }
		.hguide1{ top: 34.0909%; }
		.hguide2{ top: 65.9091%; }
		.hguide3{ top: 97.7273%; }
		.vguide0{ left: 5.8824%; }
		.vguide1{ left: 35.2941%; }
		.vguide2{ left: 64.7059%; }
		.vguide3{ left: 94.1176%; }

		.page
		{
		  position: relative;
		  /* width: 2250px;
		  height: 3150px;
		  padding: 75px 150px; */
		  float: left;
		  margin: 10px;
		  width: 600px;
		  height: 840px;
		  padding: 20px 40px;
		  border: 1px solid black;
		}

		.card
		{
		  position: relative;
		  float: left;
		  width: 33.33333%;
		  height: 33.33333%;
		  /* background-color: red; */
		  border: 1px #ccc solid;
		  margin: 0px;
		  padding: 0px;
		  box-sizing: border-box;
		}

		.card-back
		{
		  background-image: url("https://i.imgur.com/Cqf9CYJ.png");
		  background-size: 100% 100%;
		}

		@media print {
			html, body {height:100%; width:100%; margin:0; padding:0;}
			@page {
				size: letter portrait; /*2250px 3150px;*/
				max-height: 100%;
				max-width: 100%;
			}

		  .page {
		  	box-sizing: border-box;
		    position: relative;
			  width: 100%; /*2250px;*/
			  height: 100%; /*3150px;*/
			  padding: 2.2727% 5.8824%; /*75px 150px;*/
			  border: 0; /*1px solid black;*/
			  margin: 0;
		  }
		}

JavaScript

function printDiv(divId)
		{
			var printContents = document.getElementById(divId).innerHTML;
		  var originalContents = document.body.innerHTML;
		  
		  document.body.innerHTML = printContents;
		  window.print();
		  document.body.innerHTML = originalContents;
		}