CSS Grid - первые два элемента по 50% от контейнера, а третий элемент во 2-й строке - 100%

Question

Например, с полем с надписью «Набор плакатов» на прикрепленном изображении: , мне нужно, чтобы это поле увеличило всю ширину контейнера.Можно ли это сделать с помощью CSS-сетки?Это один из трех элементов списка, введенных жидкостью, содержащихся в элементе div со следующим CSS:

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