Граница после каждой строки в CSS Grid ⇐ CSS

[Anonymous]

Я пытаюсь сделать нижнюю границу после каждой строки, используя сетку CSS, выровняв содержимое по центру. Не могу уложиться в этом.

Я хочу, чтобы .line заполнял ширину всего контейнера .wrapper.

Как этого добиться?

Вот код:

Код: Выделить всё

* {
box-sizing: border-box;
}

.outer {
width: 80%;
margin: 0 auto;
}

.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
display: grid;
grid-template-columns: repeat(3, auto) max-content;
justify-content: center;
}

.wrapper>div:not(.line) {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}

.line {
grid-column-start: 1;
grid-column-end: 6;
height: 2px;
border-bottom: 1px solid black;
width: 100%;
}

Код: Выделить всё

1111111
222
3333333333

4444
555555555
99999999999

Источник: https://stackoverflow.com/questions/507 ... n-css-grid