CSS Grid十字图案问题：如何让外部十字与内部样式一致？

我正在尝试制作一个带有十字图案的CSS Grid布局，目前整体效果尚可，但容器外部的十字呈现“扁平”状态（要么是一个角，要么是半个十字），希望让它们和内部的十字完全一致（完整的十字）。

原代码 #

HTML #

<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>
</div>

CSS #

* { 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;
}

解决方案 #

边缘格子缺少对应的伪元素来构成完整十字，需要补充缺失的角样式并修正部分选择器逻辑：

修改后的CSS #

* { 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;
}

/* 基础角样式 */
.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;
    position: relative; /* 确保内部div伪元素定位正确 */
}

/* 左列底部角 */
.grid > div:nth-child(5n - 4) > div:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -1px;
    border: 1px solid white;
    border-top: 0;
    border-right: 0;
    width: 1rem;
    height: 1rem;
}

/* 右列顶部角 */
.grid > div:nth-child(5n) > div:after {
    content: '';
    position: absolute;
    top: -1px;
    right: 0;
    border: 1px solid white;
    border-bottom: 0;
    border-left: 0;
    width: 1rem;
    height: 1rem;
}

/* 顶部行右侧角（修正选择器覆盖基础样式） */
.grid > div:nth-child(-n + 5):after {
    content: '';
    position: absolute;
    top: -1px;
    right: 0;
    border: 1px solid white;
    border-bottom: 0;
    border-left: 0;
    width: 1rem;
    height: 1rem;
}

/* 底部行左侧角（修正选择器选中完整最后一行） */
.grid > div:nth-last-child(-n + 5):before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -1px;
    border: 1px solid white;
    border-top: 0;
    border-right: 0;
    width: 1rem;
    height: 1rem;
}

/* 四个角落补充缺失的角 */
/* 左上角 */
.grid > div:first-child > div:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border: 1px solid white;
    border-top: 0;
    border-left: 0;
    width: 1rem;
    height: 1rem;
}

/* 右上角 */
.grid > div:nth-child(5) > div:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -1px;
    border: 1px solid white;
    border-top: 0;
    border-right: 0;
    width: 1rem;
    height: 1rem;
}

/* 左下角 */
.grid > div:nth-last-child(5) > div:after {
    content: '';
    position: absolute;
    top: -1px;
    right: 0;
    border: 1px solid white;
    border-bottom: 0;
    border-left: 0;
    width: 1rem;
    height: 1rem;
}

/* 右下角 */
.grid > div:last-child > div:before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    border: 1px solid white;
    border-bottom: 0;
    border-right: 0;
    width: 1rem;
    height: 1rem;
}

核心调整点 #

1. 修正底部行选择器：将nth-last-child(-n + 4)改为nth-last-child(-n + 5)，确保选中完整的最后一行格子。
2. 为四个角落的格子补充缺失的伪元素，让每个角落都能构成完整十字。
3. 给内部div添加position: relative，保证其伪元素定位基准正确。
4. 调整顶部行和右列的选择器逻辑，避免样式覆盖冲突。

内容的提问来源于stack exchange，提问作者Alfred Kwak