Javascript 按行为列添加下边框，但不按最后一行添加下边框+；反应敏捷的

基本上，我在网格中显示不同数量的列（单元格，它基于基础）。桌面上有3列跨距，平板电脑上有2列跨距，手机上有1列跨距。 我需要在每一列中添加底部边框，但不能在底部行的下面列上添加。请以图片为例

我已经尝试了cssnth-child，但是不能用它来计算列数（至少我认为是这样）。因此，希望通过php或js编程实现这一点。但是我不知道在哪里或如何解决这个问题！！！非常感谢您的帮助

这是我目前掌握的代码：

<section class="inbegrepen">
<div class="grid-container">
    <div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-3">

        <?php

        if( have_rows('inbegrepen') ):

            $i = 1;

            while( have_rows('inbegrepen') ): the_row();

                $title = get_sub_field('inbegrepen_titel');
                $content = get_sub_field('inbegrepen_tekst');

                ?>

                <div class="cell">
                    <h6><span><?php echo $i; ?></span> <?php echo $title; ?></h6>
                    <?php echo $content; ?>
                </div>

                <?php $i++; endwhile; ?>

        <?php endif; ?>

    </div>
</div>

---

您可以通过在容器上重复渐变来实现这一点

下面是一个简化的例子

.container{
背景：
重复线性渐变（到底部，
透明0，透明钙（110px-2px），
红钙（110px-2px）、红钙（110px+1px））
顶部/100%计算（100%-5px）；
/*说明*/
显示：网格；
网格模板列：重复（自动填充，最小值（100px，1fr））；
栅柱间隙：5px；
动画：改变5s线性无限交替；
}
.container>div{
显示：内联块；
垂直对齐：顶部；
高度：100px；
保证金：5px0；
背景：灰色；
}
@关键帧改变{
从{宽度：600px}
至{宽度：200px}
}

感谢您的快速回复！如果柱的高度相同，这将非常有效。内容将基于文本，因此高度可能会有所不同。@BramRoos您的屏幕截图显示的高度相等：）意识到我应该提到。很抱歉