CSS网格-前两个项目各占容器的50%，第二行的第三个项目占100%

Question

例如，在附加图像上显示"Poster Set“的方框：

，我需要这个盒子来扩展容器的整个宽度。CSS网格可以做到这一点吗？它是由liquid注入的三个列表项之一，包含在带有以下CSS的div中：

.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1em;
  justify-content: center;
} 

Answer 1

由于网格是两列，因此使海报元素覆盖2列网格区域。

有几种方法可以做到这一点：

poster-set-element {
   grid-column: 1 / span 2; /* start at grid column line 1 and span across 2 more lines */
}

或

poster-set-element {
   grid-column: 1 / 3;  /* start at grid column line 1; end at grid column line 3 */
}

或

poster-set-element {
   grid-column: 1 / -1; /* start at grid column line 1 starting at the starting edge;
                           end at grid column line 1 starting at the ending edge;
                           (note: this method works only with explicit grids) */
}