javascript - 逐行向列添加底部边框，但不是最后一个+响应

Question

基本上我在网格中显示不同数量的列(单元格，它基于 Foundation)。台式机上有 3 列跨度，平板电脑上有 2 列，移动设备上有 1 列。我需要为每一列添加一个底部边框，但不是在底行的下面的列上。请以图片为例。

我已经尝试过 css nth 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>

Answer 1

您可以在容器上使用重复渐变来实现此目的。

这是一个简单的例子

.container {
  background:
    repeating-linear-gradient(to bottom, 
        transparent 0, transparent calc(110px - 2px),
        red calc(110px - 2px),red calc(110px + 1px)) 
        top/100% calc(100% - 5px);
        
  /*to illustrate*/
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  grid-column-gap:5px;
  animation:change 5s linear infinite alternate;
}
.container > div {
  display:inline-block;
  vertical-align:top;
  height:100px;
  margin:5px 0;
  background:grey;
}

@keyframes change {
  from {width:600px}
  to {width:200px}
}

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