Grid布局中选中Label后文本样式变化引发的对齐与行高问题

我用label标签做了个Grid布局，元素按行列排列。点击label（能触发对应的checkbox或radio按钮）时，希望label文本变大加粗，这个效果已经在下面的代码里实现了（为了简化只放了一个实际的checkbox）。

但点击label后，文本变大加粗，和未选中的项就不对齐了。我试了各种align-和justify-相关的items、content属性组合，都没成功，有没有合适的属性组合，或者需要加其他包裹标签？
我接受居中或基线垂直对齐，同时要水平居中。

补充：水平对齐问题已经解决，但垂直对齐还是难搞。
补充2：如果移除label的height属性，再加justify-items:center，元素对齐正常，但选中时Grid行高会跳，这不能忍。除了靠内容高度，有没有别的方法控制Grid行高？

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset=utf-8>
    <title>test</title>
    <style>
:root {
font-size: 12pt;
}
div {
display:inline-grid;
grid-template-rows: repeat(3,1fr);
grid-auto-flow: column;
align-items: center;
text-align: center;
}
label {
height: 1.6rem;
width: 1.6rem;
}
input:checked ~ div [for=ck] {
font-size: 1.6rem;
font-weight: 900;
}
    </style>
  </head>
  <body>
    <h1>test</h1>
    <input type=checkbox id=ck>
    <br>
    <div>
      <label>1</label>
      <label>2</label>
      <label>3</label>
      <label>4</label>
      <label for=ck>5</label>
      <label>6</label>
      <label>7</label>
      <label>8</label>
      <label>9</label>
    </div>
  </body>
</html>

核心思路是固定Grid行高，同时让label内的文本在固定区域内居中，彻底避免布局跳动和对齐问题：

1. 给Grid容器设置固定行高：把grid-template-rows: repeat(3,1fr)改成固定数值，比如repeat(3, 2.2rem)——这个值要能容纳选中后放大的文本，确保行高不会随内容变化。
2. 给label启用flex布局：让文本在label的固定宽高容器内自动垂直+水平居中，不管文本大小怎么变，都不会偏移或撑高行。
3. 保留label的固定宽高，避免选中后元素尺寸变化影响整体布局。

修改后的完整代码：

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset=utf-8>
    <title>test</title>
    <style>
:root {
font-size: 12pt;
}
div {
display:inline-grid;
grid-template-rows: repeat(3, 2.2rem); /* 固定行高，避免跳动 */
grid-auto-flow: column;
}
label {
height: 1.6rem;
width: 1.6rem;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
input:checked ~ div [for=ck] {
font-size: 1.6rem;
font-weight: 900;
}
    </style>
  </head>
  <body>
    <h1>test</h1>
    <input type=checkbox id=ck>
    <br>
    <div>
      <label>1</label>
      <label>2</label>
      <label>3</label>
      <label>4</label>
      <label for=ck>5</label>
      <label>6</label>
      <label>7</label>
      <label>8</label>
      <label>9</label>
    </div>
  </body>
</html>

原理说明 #

• 固定Grid行高：用具体数值代替1fr，行高被锁定，无论单元格内内容如何变化，都不会触发行高跳动。
• label用flex布局：把label变成flex容器后，内部文本会自动在固定宽高内居中，即使文本放大加粗，也只会在容器内显示，不会影响外部Grid布局的对齐和行高。

内容的提问来源于stack exchange，提问作者Victoria