CSSで、印刷するときだけレイアウトを変える方法

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="print.css" media="print">

<header class="site-header">
  <span class="logo">旅のしおり</span>
  <button type="button" onclick="window.print()">印刷する</button>
</header>
<div class="layout">
  <nav class="side-nav">
    <a href="#day1">1日目</a>
    <a href="#day2">2日目</a>
    <a href="#day3">3日目</a>
  </nav>
  <main>
    <h1>海辺の町をめぐる3日間</h1>
    <section class="day" id="day1">
      <h2>1日目　港と市場</h2>
      <div class="spots">
        <article class="spot"><h3>朝市</h3><p>7:00〜9:00。港の前の通りで、とれたての魚や野菜が並びます。</p></article>
        <!-- カードが続く -->
      </div>
    </section>
    <section class="day" id="day2">…</section>
    <section class="day" id="day3">…</section>
  </main>
</div>

body { margin: 0; font-family: "Noto Sans CJK JP", sans-serif; color: #1f2a30; background: #eefafd; }
.site-header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; background: #067a98; color: #fff; }
.site-header button { font: inherit; padding: 6px 14px; }
.layout { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 20px; }
.side-nav { display: flex; gap: 12px; }
.side-nav a { color: #067a98; }
.spots { display: grid; grid-template-columns: 1fr; gap: 12px; }
.spot { background: #fff; border: 1px solid #00c8e8; border-radius: 8px; padding: 4px 14px; }
.spot h3 { margin: 8px 0 0; font-size: 16px; }
.spot p { margin: 6px 0 10px; font-size: 14px; line-height: 1.6; }

/* 幅が 900px 以上の画面では、メニューを左に置き、カードを3列にする */
@media (min-width: 900px) {
  .layout { grid-template-columns: 160px 1fr; }
  .side-nav { flex-direction: column; }
  .spots { grid-template-columns: repeat(3, 1fr); }
}

/* この中のスタイルは、印刷するときだけ使われる（link の media="print"） */
.site-header, .side-nav { display: none; }
body { background: #fff; }
.layout { display: block; padding: 0; }
/* カードは、紙の幅に関係なく2列にする */
.spots { grid-template-columns: repeat(2, 1fr); }
/* カードの途中でページを分けない */
.spot { break-inside: avoid; }
/* 2日目からは、新しいページから始める */
.day + .day { break-before: page; }

@page {
  size: A4;
  margin: 15mm;
}

--- out/print.pdf ページ数 3
[1ページ] 594.96 x 841.92 pt : 海辺の町をめぐる3日間 | 1日目 港と市場 | 朝市 ／ 灯台
[2ページ] 594.96 x 841.92 pt : 2日目 島へ渡る | フェリー ／ 島の神社 | 8:30 発。島までは船で40分です。 ／ 9:30〜10:30。石段の上に小さな神社がありま
[3ページ] 594.96 x 841.92 pt : 3日目 町歩き | 古い商店街 ／ 美術館 | 9:00〜11:00。木造の店が並ぶ通りを歩きます。 ／ 11:30〜13:00。海を描いた絵を集めた美術館で

/* style.css の最後に足す */
@media print {
  .site-header, .side-nav { display: none; }
  body { background: #fff; }
  .layout { display: block; padding: 0; }
  .spots { grid-template-columns: repeat(2, 1fr); }
  .spot { break-inside: avoid; }
  .day + .day { break-before: page; }
}
@page { size: A4; margin: 15mm; }

@page なし、page.pdf() の指定なし
  紙 612 x 792 pts (letter) / 当てはまった最大の min-width と向き: 幅 816
@page なし、page.pdf({ format: "A4" })
  紙 595.92 x 842.88 pts (A4) / 当てはまった最大の min-width と向き: 幅 794
@page { size: A4; margin: 15mm }、preferCSSPageSize
  紙 594.96 x 841.92 pts (A4) / 当てはまった最大の min-width と向き: 幅 816
@page { size: A4 landscape; margin: 15mm }、preferCSSPageSize
  紙 841.92 x 594.96 pts (A4) / 当てはまった最大の min-width と向き: 幅 816
@page { size: A4; margin: 0 }、preferCSSPageSize
  紙 594.96 x 841.92 pts (A4) / 当てはまった最大の min-width と向き: 幅 816
@page なし、page.pdf({ format: "A4", landscape: true })
  紙 842.88 x 595.92 pts (A4) / 当てはまった最大の min-width と向き: landscape 幅 1124
@page なし、page.pdf({ format: "A4", margin: 15mm })
  紙 595.92 x 842.88 pts (A4) / 当てはまった最大の min-width と向き: 幅 682

--- out/all-break.pdf ページ数 4
[1ページ] 594.96 x 841.92 pt : 海辺の町をめぐる3日間
[2ページ] 594.96 x 841.92 pt : 1日目 港と市場 | 朝市 ／ 灯台 | 7:00〜9:00。港の前の通りで、とれたての魚や ／ 10:00〜11:30。岬の先にある白い灯台です。上

--- out/no-break.pdf ページ数 2
[1ページ] 594.96 x 841.92 pt : 海辺の町をめぐる3日間 | 1日目 港と市場 | 朝市 ／ 灯台
[2ページ] 594.96 x 841.92 pt : 駅 | 15:00 発の電車で帰ります。
--- out/no-break-no-avoid.pdf ページ数 2
[1ページ] 594.96 x 841.92 pt : 海辺の町をめぐる3日間 | 1日目 港と市場 | 朝市 ／ 灯台
[2ページ] 594.96 x 841.92 pt : （文字なし）

画面（幅 1000px）: {
  print: false,
  w900: true,
  header: 'flex',
  columns: '250.656px 250.672px 250.672px'
}
emulateMedia({ media: "print" }) の後: { print: true, w900: true, header: 'none', columns: '494px 494px' }