CSS GRID：想在每行后面添加边框

Question

我有一个问题，我想在每行后面添加一些边框，但我不知道该怎么做，你能帮我吗（不添加 26 div）

这是我的 html :

<div class="day mon">
                <div class="date">
                    <p class="date-num">9</p>
                    <p class="date-day">Mon</p>
                </div>
                <div class="events">
                    <a href="http://google.com" class="event start-2 end-5 securities">
                        <p class="title">Securities Regulation</p>
                        <p class="time">2 PM - 5 PM</p>
                    </a>
                </div>
            </div>

这是我的CSS：

.events {
    display: grid;
    grid-template-rows: repeat(26, 30px);
    border-radius: 5px;
    background: var(--calBgColor);
}

我想要这个（带黑线）：

谢谢大家

Answer 1

好吧，在您的情况下添加边框，您可以使用

border-bottom

属性，但由于您使用

.events

类来定义网格行，您可能希望将边框应用到

.events

的子元素，但是再次，因为您不想添加 26 个 div，所以好的方法是针对

.events

类的子级，您提到 HTML 结构显示每个事件都包含在

<a>

标签内，该标签又位于

.events 内

div

，我会这样做：

.events a {
    border-bottom: 1px solid black; 
    display: block;
}

.events a:last-child {
    border-bottom: none;
}

此外，这还假设网格中的每一行对应一个

<a>

标签。