余白と幅を決める

4か8の倍数の階段を作り、その中からしか選ばない。中間の値を作った時点で統一は崩れる。余白

<div class="stack">
  <article class="card">…</article>
</div>

:root {
  --space-5: 24px;
  --space-4: 16px;
}
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.card { padding: var(--space-4); }

4 8 12 16 24 32 48 64 96 128。文字とラベルは4〜8、組の中は8〜16、組と組は24〜48。余白

<!-- :root に刻みを置く -->

:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
}

上を下の2〜3倍空ける。見出しは次の本文に属するので、前との距離を大きく取る。余白

<h2>中見出し</h2>
<p>本文</p>

:root {
  --space-8: 64px;
  --space-3: 12px;
}
h2 { margin-block: var(--space-8) var(--space-3); }
h3 { margin-block: var(--space-6) var(--space-2); }

行長を文字数で決めない。版面をコンテナに与えて、見出しも本文も表も同じ右端に揃える。版面と行長

.page {
  max-inline-size: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

隣に要素を置く。目次でも図版でも、置けば折り返しがその列幅で決まる。版面と行長

.with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: var(--space-8);
}

固定幅の要素か、はみ出す表か画像。幅375pxで開いて、右端を越えている要素を特定する。レスポンシブ

img, svg, video { max-inline-size: 100%; block-size: auto; }
.table-wrap { overflow-x: auto; }

端末名で決めない。中身が崩れる幅で決める。375・768・1280は確認する幅であって分岐点ではない。レスポンシブ

@media (max-width: 48rem) { .with-aside { grid-template-columns: 1fr; } }

同じHTMLで並びを変えるほうが保守が楽。別々に作ると必ずずれる。レスポンシブ

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
}

並びの中の間隔は gap。端の余白を打ち消す記述が要らなくなる。レイアウトの実装

<div class="row"><span>A</span><span>B</span><span>C</span></div>

:root {
  --space-4: 16px;
}
.row { display: flex; gap: var(--space-4); }

上下marginの相殺が起きている。gapかpaddingに替えるか、flex/gridの中に入れる。余白

.stack { display: flex; flex-direction: column; gap: var(--space-4); }

読ませるものは版面を決めて寄せる。見せるもの（写真・図）は端まで出してよい。版面と行長

.page { max-inline-size: var(--page); margin-inline: auto; }
.full-bleed { margin-inline: calc(-1 * var(--gutter)); }