JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<ul class="kartenhalter">
<li><article>Max Mustermann</article></li>
<li><article>Max Mustermann</article></li>
<li><article>Max Mustermann</article></li>
<li><article>Max Mustermann</article></li>
<li><article>Max Mustermann</article></li>
<li><article>Max Mustermann</article></li>
<li><article>Max Mustermann</article></li>
<li><article>Max Mustermann</article></li>
<li><article>Max Mustermann</article></li>
<li><article>Max Mustermann</article></li>
</ul>

CSS

ul.kartenhalter {
  --passer-größe: 0.5cm;
  --passer-abstand: 0.3cm;
  margin-top: 2cm;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 5cm);
  grid-auto-rows: 1cm;
  justify-content: center;
  gap: 0.5cm;
}

.kartenhalter li {
  position: relative;
}
.kartenhalter article {
  border: 1px solid black;
  box-sizing: border-box;
  padding: 0.5em;
  width: 100%; height: 100%;
  overflow: hidden;
}
/* ::before: oben/unten, ::after: links/rechts */
/* border-style per Default auf none setzen, wird durch weitere Regeln
   nach Bedarf auf solid gesetzt */
.kartenhalter li::before, .kartenhalter li::after {
  content: " ";
  display: block;
  position: absolute;
  box-sizing: border-box;
  border: 1px none black;
}
/* Alle oben/unten Passer: Breite 100%, Höhe=Passergröße, linksbündig */
.kartenhalter li::before {
  width: 100%; height: var(--passer-größe);
  left: 0;
}
/* Alle links/rechts Passer: Breite=Passergröße, Höhe 100%, top-bündig */
/* Die links/rechts Passer werden alle verwendet, border-style kann deshalb
   für alle gemeinsam gesetzt werden */
.kartenhalter li::after {
  width: var(--passer-größe); height: 100%;
  top: 0;
  border-top-style: solid;
  border-bottom-style: solid;
}
/* Passer links von der ersten Spalte (ungerade li) */
.kartenhalter li:nth-of-type(2n+1)::after {
  left: calc(0px - var(--passer-abstand) - var(--passer-größe));
}
/* Passer rechts von der letzten Spalte (gerade li) */
.kartenhalter li:nth-of-type(2n)::after {
  right: calc(0px - var(--passer-abstand) - var(--passer-größe));
}
/* Passer oben: erstes und zweites li */
.kartenhalter li:nth-of-type(1)::before,
.kartenhalter li:nth-of-type(2)::before{
  border-left-style: solid;
  border-right-style: solid;
  top: calc(0px - var(--passer-abstand) - var(--passer-größe));
}
/* Passer unten: letztes und vorletztes li */
.kartenhalter li:nth-last-of-type(1)::before,
.kartenhalter li:nth-last-of-type(2)::before {
  border-left-style: solid;
 ...