css - 网格列的 margin-top

Question

我需要像在图像上一样制作网格结构在 此处输入图像描述

我将此解决方案用于桌面上的 4 列，但对于移动设备，我需要 3 列。在这个解决方案中，我无法为列设置不同的边距

.gallery__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}
.img_wrapper:nth-of-type(even) {
  top: 20px;
  position: relative;
} 

UPD：对于我使用的 3 列，但我不能使用 nth-of-type(even)

.gallery__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;

}

标签： csscss-grid

Answer 1

我不明白你的问题。我能够使用您的代码创建一个包含 3 列和一个边距的画廊。问题是什么？

由于您没有提供任何 HTML，我不得不猜测并创建了自己的 HTML。

    .gallery__wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
      grid-gap: 1em;
    }
    .img_wrapper {
      background-color: #123456;
      min-width: 180px;
      min-height: 360px;
    }
    .img_wrapper:nth-of-type(even) {
      /**
       * Using margin-top: 20px;
       * also works here
       */
      position: relative;
      top: 20px;
    }

  <div class="gallery__wrapper">
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
    <div class="img_wrapper"></div>
  </div>