CSS 命名网格碎片化，同名区域未连接

Question

我已阅读 MDN 文档和 SO 答案。他们强调 CSS 网格中的命名区域必须是连续的和矩形的。我下面的网格遵循这些要求，但是名为 area 的图标没有填充 2 个单元格，只有 1 个： HTML：

<label for="js-icon" class="OfficeIconField">
  <input id="js-icon" class="OfficeFloatInput" value="" type="text" required="" placeholder="Placeholder text">
  <label for="js-icon" class="OfficeFloatLabel js-css-blank">Text placeholder</label>
  <span class="OfficeHelp">Some help text</span>
  <svg class="OfficeIcon" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" fill="black" version="1.1" viewBox="0 0 24 24" ><path d="M0 0h24v24H0z" fill="none"></path><path d="m12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"></path>
</svg>
</label>

CSS：

.OfficeIconField {
    display: grid;
    gap: 8px;
    align-items: end;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "icon label"
      "icon input"
      "blank help";
    & .OfficeFloatLabel {
        grid-area: label;
    }
    & .OfficeFloatInput {
        grid-area: input;
    }
    & .OfficeHelp {
        grid-area: help;
    }
    & .OfficeIcon {
        grid-area: icon;
        background: red !important;
        justify-self: center;
    }
}

结果（您可以看到.OfficeIcon 仅跨越左上角的单元格，而不是与其下方的单元格合并：

想要的结果：

如何将命名区域固定为跨越 2 个单元格？

并将其放置在其单元格的底部中心，如下所示：

我猜我必须将 SVG 放在 div 中，然后将 SVG 放在 div 中。如果可能的话，我宁愿不用额外的div。

Answer 1

您使用 grid-template-columns: 64px 1fr; 创建网格列，因此尝试将 svg 大小调整为 64px，或者您可以在 .OfficeIcon 上使用 align-self: end; 和 justify-self: center;

.OfficeIconField {
    display: grid;
    gap: 8px;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "icon label"
      "icon input"
      "blank help";
    border: 1px solid black;
    }
.OfficeFloatLabel {
        grid-area: label;
        border: 1px solid black;
    }
.OfficeFloatInput {
        grid-area: input;
        border: 1px solid black;
    }
.OfficeHelp {
        grid-area: help;
        border: 1px solid black;
    }
.OfficeIcon {
        grid-area: icon;
        background: red !important;
        border: 1px solid black;
        align-self: end;
        justify-self: center;
        /*align-self: stretch; /* desperate attempt */*/
    }
}

<label for="js-icon" class="OfficeIconField">
  <input id="js-icon" class="OfficeFloatInput" value="" type="text" required="" placeholder="Placeholder text">
  <label for="js-icon" class="OfficeFloatLabel js-css-blank">Text placeholder</label>
  <span class="OfficeHelp">Some help text</span>
  <svg class="OfficeIcon" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" fill="black" version="1.1" viewBox="0 0 24 24" >
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="m12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"></path>
  </svg>
</label>