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

Question

例如附带图片上标有“海报集”的框: ，我需要这个盒子来扩展容器的整个宽度。这可以用 CSS 网格来完成吗？它是三个列表项之一，由液体注入(inject)，包含在具有以下 CSS 的 div 中:

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

Answer 1

由于网格是两列，所以让海报元素覆盖两列网格区域。

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

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) */
}