Fill empt <элементы сетки

Question

Я пытаюсь отсортировать div как "карты" в строке с сеткой css:

body{
  padding: 0;
  margin: 0;
  background: lightgrey;
}

section{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr ;
  align-items: end;
}

article {
  border-bottom: 2px solid #000;
  margin-top: 20px;
}


div {
  background: #fff;
  width: 80%;
  margin: 0 auto;
}

<section>
  <article><div>A<br>B</div></article>
  <article><div>B</div></article>
  <article><div>C</div></article>
  <article><div>D</div></article>
  <article><div>E <br> x</div></article>
  <article><div>F</div></article>
  <article><div>G</div></article>
</section>

Как установить последний край-нижнюю границу для заполнения всей ширины области просмотра? Есть ли способ создать пустые ячейки сетки, чтобы заполнить строку?

Answer 1

Использовать псевдоэлемент в первом элементе каждой строки:

body{
  padding: 0;
  margin: 0;
  background: lightgrey;
}

section{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr ;
  align-items: end;
}

article {
  border-bottom: 2px solid transparent;
  margin-top: 20px;
  position:relative;
}
article:nth-child(3n + 1)::before {
  content:"";
  position:absolute;
  top:100%;
  height:2px;
  left:0;
  /* cover the two columns on the right */
  right:-200%;  /* OR width:300% */
  background:#000;
}


div {
  background: #fff;
  width: 80%;
  margin: 0 auto;
}

<section>
  <article><div>A<br>B</div></article>
  <article><div>B</div></article>
  <article><div>C</div></article>
  <article><div>D</div></article>
  <article><div>E <br> x</div></article>
  <article><div>F</div></article>
  <article><div>G</div></article>
</section>