CSS网格–前两项占容器的50％，第二行的第三项占100％

Question

例如在附有图片的框上显示“海报集”，我需要此框来扩展容器的整个宽度。可以使用CSS网格完成此操作吗？它是通过以下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 */
}

OR

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

OR

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