Fancybox和LostGrid让我很难受

Question

我需要在我的网站上放置一个画廊，该画廊仅显示每个类别的第一张图片。我也在使用FlexGrid，因为我的布局有三列。

我有一个foreach循环，为每个图像创建一个<a>标签，以便可以访问打开图库的所有图片。然后，我要做的是隐藏图像编号的所有<a>。 2、3、4等

现在的问题是，LostGrid似乎仍然记得我拥有所有这些<a>标记，即使我将它们设为display: none，并且布局也变得很疯狂。

我一直在考虑，但是我真的不知道该怎么办。

有人可以帮助我吗？谢谢！

What I'd like (right solution)

What I've got

以下是我的代码的基本部分（HTML / PHP [Kirby] + CSS [Stylus]）：当然，如果您运行它就行不通。

.gallery
  display block
  margin-top 50px
  a
    display block
    lost-column 1/3 3 30px
    position relative
    padding-bottom 17.25%
    margin-bottom 30px
    > div
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      background-size cover
      background-position center
    &.hidden
      display none

<div class="gallery">
      <?php foreach($categories as $category): ?>
          <?php foreach($category->object()->toStructure() as $object): ?>
              <?php if($object->gallery()->isNotEmpty()): ?>
                  <?php $i = 0 ?>
                  <?php foreach($object->gallery()->toFiles() as $image): ?>
                      <a <?php e(!$i != 1, 'class="hidden"') ?> href="<?php echo $image->url() ?>" data-fancybox="gallery" data-caption="<?php echo $image->caption()->html() ?>">
                          <div class="image" style="background-image: url('<?php echo $image->url() ?>')"></div>
                      </a>
                      <?php $i++ ?>
                  <?php endforeach ?>
              <?php endif ?>
          <?php endforeach ?>
      <?php endforeach ?>
  </div>

Answer 1

可以有多种解决方案，最简单的解决方法可能是将其他链接移到主要区域之外，您可以将它们放置在任何位置，因为它们始终被隐藏。