html - 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 仅跨越左上 Angular 的单元格，而不是与其下方的单元格合并:

想要的结果:

如何修复命名区域以跨越 2 个单元格？
并将其放置在其单元格的底部中心，如下所示:

我猜我将不得不将 SVG 放在 div 中，然后将 SVG 放置在 div 内.我宁愿在没有额外的情况下这样做 div如果可能的话。

Answer 1

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

.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>