如何在4x4网格的中心绘制y轴和x轴线

Question

我目前有4项内容。我试图在不使用border属性的情况下在4个项目的中心绘制一条x轴和y轴线。到目前为止，我已经尝试过使用nth-child((：after，但我无法使它们完全居中，也无法保持在它们所在的部分内

ul {
padding: 20px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 2000px;
margin: auto;
padding: 50px;
}
li {
list-style-type: none;
padding: 20px;
}
li:nth-child(1) {
border-right: 1px solid black;
border-bottom: 1px solid black;
}
li:nth-child(2) {
border-bottom: 1px solid black;
}
li:nth-child(3) {
border-right: 1px solid black;
}

<section>
<ul>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
</ul>
</section>

以下是我如何尝试使用：after属性来执行此操作。

ul {
padding: 20px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 2000px;
margin: auto;
padding: 50px;
}
li {
list-style-type: none;
padding: 20px;
}
li:nth-child(1):after {
content: '';
position: absolute;
left: 0;
margin: 40px;
height: 1px;
width: 80%;
background: #000;
}
li:nth-child(3):after {
content: '';
position: absolute;
top: 0;
right: 50%;
margin: 40px;
width: 1px;
height: 80%;
background: #000;
}

<section>
<ul>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
</ul>
</section>

Answer 1

使用大纲很容易：

ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 2000px;
margin: auto;
padding:0;
border: 50px solid transparent; /* replace padding with transparent border */
overflow:hidden; /* here */
}
li {
list-style-type: none;
padding: 20px;
outline:1px solid; /* and here */
}

<section>
<ul>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
</ul>
</section>

也像下面使用梯度

ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows:1fr;
max-width: 2000px;
margin: auto;
padding:50px;
background:
linear-gradient(#000 0 0) center/100% 1px,
linear-gradient(#000 0 0) center/1px 100%;
background-repeat:no-repeat;
}
li {
list-style-type: none;
padding: 20px;
}
body {
margin:0;
}

<section>
<ul>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
</ul>
</section>

Answer 2

使用transform: translate(-50%)和left:50%将第1个子项和第3个子项上的线居中对齐。

ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
position: relative;
margin: 0;
padding: 20px;
}
li {
list-style-type: none;
padding: 20px; /* control spacing*/
}
li:nth-child(1):after {
height: 1px;
width: 100%;
}
li:nth-child(3):after {
width: 1px;
height: 100%;
top: 0;
}
li:nth-child(1):after,
li:nth-child(3):after {
background: #000;
content: "";
position: absolute;
transform: translate(-50%); /* center align lines */
left: 50%;
}

<section>
<ul>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
<li>
<h4>
TITLE
</h4>
<p>Nulla aliqua irure in enim ex eu ex culpa Lorem. Veniam cillum dolore ea sit ea aute consequat aute id. Lorem qui adipisicing ea culpa fugiat ea labore excepteur. Deserunt fugiat elit labore dolore.
</p>
</li>
</ul>
</section>