网格模板列中的插槽答案

【问题标题】：slots in grid-template-column网格模板列中的插槽
【发布时间】：2021-11-22 20:15:40
【问题描述】：

我有以下 HTML 标记：

<sl-responsive-media >
    <slot name="image"> 
    </slot>
</sl-responsive-media>
    <slot name="header" part="header"></slot>
<sl-divider>
    <slot name="divider"> 
    </slot>
</sl-divider>
<slot name="text" part="text"></slot>
<slot name="link" part="link"></slot>

我正在尝试以以下网格方式放置 HTML：

CSS 试过了：

:host {
      display: grid;
      grid-template-columns: 
      'image . header . 'auto
      '. . divider .'auto
      '. . text .'auto
      '. . link .'auto
       /4fr 4fr
      }

这个 css 不工作。我没有正确创建 2 列。有什么帮助吗？

【问题讨论】：

标签： html css css-grid

【解决方案1】：

好吧，我自己能想出答案：

:host {
      display: grid;
      grid-template-areas:
      "image header"
      "image divider"
      "image text"
      "image link";
      grid-gap: 1em;
     }

slot[name='image']::slotted(*){
      grid-area: image;
    }
slot[name='header']::slotted(*) {
      grid-area: header;
    }

    slot[name='divider']::slotted(*) {
      grid-area: divider;
    }

 slot[name='text']::slotted(*) {
      grid-area: text;
    }

    slot[name='link']::slotted(*) {
      grid-area: link;
    }

这完美地将插槽分配给相应的网格区域。

【讨论】：