CSS Named grid fragmented, same named areas not joined

Question

I have read MDN docs, and SO answers. They stress that named areas in CSS grids must be continguous, and rectangular. My grid below follows these requirements, however the icon named area does not fill 2 cells, only 1: HTML:


  
  Text placeholder
  Some help text

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;
    }
}

Result (you can see .OfficeIcon only spans the top left cell, instead of being merged with the cell below it too:

Desired result:

How to fix the named area to span 2 cells?

And position it at the bottom center of its cell like this:

Im guessing I am going to have to place the SVG within a div, and then position the SVG inside the div. I would prefer to do it without the extra div if possible.

user_11989189 · Answer

You make grid columns with grid-template-columns: 64px 1fr; , so try to just adjust svg size to 64px, or you can use align-self: end; and justify-self: center; on .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 */*/
    }
}


  
  Text placeholder
  Some help text

CSS Named grid fragmented, same named areas not joined

1 Answers