我在试着做一个十字形的格子。
到目前为止一切都很好，但我正在努力让十字架在外面的部门。
在这个例子中，你可以看到外面的十字架是“平的”，我想让他们完全一样的内部（=一个完整的十字架）。

编辑：我说的平是指它们不是一个完整的十字架。它们要么是一个角，要么是半个十字架。

有人有主意吗？
我的笔：
https://codepen.io/twohundred/pen/OJoObXw

<div class="container">
<div class="grid">
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
</div>

* { box-sizing: border-box; }

body { 
    background-color: red; 
    color: white; 
    font-size: 1rem; 
} 

.container { 
    height: 100%;
    margin: 0 auto; 
    padding: 1.5em;
}

.grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 101px;
}

.grid > div {
    position: relative;
}

/* Bottom right */
.grid > div:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    border: 1px solid white;
    border-top: 0;
    border-left: 0;
    width: 1rem;
    height: 1rem;
}

.grid > div:before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    display: block;
    border: 1px solid white;
    border-bottom: 0;
    border-right: 0;
    width: 1rem;
    height: 1rem;
}

.grid > div > div {
    height: calc(100% - 1rem);
    margin: 0.5rem;
}

.grid > div:nth-child(5n - 4) > div:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -1px;
    display: block;
    border: 1px solid white;
    border-top: 0;
    border-right: 0;
    width: 1rem;
    height: 1rem;
}

.grid > div:nth-child(5n - 5) > div:after {
    content: '';
    position: absolute;
    top: -1px;
    right: 0;
    display: block;
    border: 1px solid white;
    border-bottom: 0;
    border-left: 0;
    width: 1rem;
    height: 1rem;
}

/* Top row top right */
.grid > div:nth-child(-n + 5) >div:after {
    content: '';
    position: absolute;
    top: -1px;
    right: 0;
    display: block;
    border: 1px solid white;
    border-bottom: 0;
    border-left: 0;
    width: 1rem;
    height: 1rem;
}

.grid > div:nth-last-child(-n + 4) > div:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -1px;
    display: block;
    border: 1px solid white;
    border-top: 0;
    border-right: 0;
    width: 1rem;
    height: 1rem;
}