I'm trying to make a very simple 'print coupons' page, and thought CSS grid would be perfect for this, but can not get it to not break pages in the middle of an element when printing. The mark up is very simple, following this pattern, and with this CSS:
body {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(18rem, 1fr) );
font-family: Open Sans,Arial,sans-serif;
text-align:center;
font-size: 0.8rem;
font-weight: 300;
}
h1 {
font-size:1rem;
font-weight: 400;
}
.coupon {
display:flex;
align-items: center;
min-height: 8rem;
padding: 1rem;
border-style: dashed;
border-width: 1px;
break-inside: avoid;
}
.content {
width:100%;
}<body>
<div class="coupon">
<div class="content">
<h1>Coupon Code</h1>
<p>Coupon Description</p>
</div>
</div>
<div class="coupon">
<div class="content">
<h1>Coupon Code</h1>
<p>Coupon Description</p>
</div>
</div>
(etc)
</body>But the break-inside:avoid property isn't working. What can I do to make sure the page breaks don't happen within a coupon? Using floats for this kind of thing seems very backward to me.