整列的 CSS 网格边距顶部

Question

是否可以像图像中那样使用 CSS 网格将所有第二个/偶数网格列作为一个整体进行移动？

我目前的css代码情况很简单，看起来像这样:

display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;

我正在尝试实现如下图所示的效果:

Answer 1

您可以使用 :nth-child() 伪类来实现此目的。这就是我的处理方法:

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

.container{
  max-width: 900px;
  margin: 0 auto;
  height: auto;
}
.cards{
  display: grid;
  place-items: center;
  grid-template-columns: repeat(4,1fr);
  gap: 5px;
}

.card{
  width: 200px;
  height: 250px;
  border: 3px solid black;
}

.card:nth-child(2n-2){
  position: relative;
  top: 100px;
}
/* or use margin */
/*
.card:nth-child(2n-2){
  margin-top: 100px;
}
*/

这是代码笔链接:https://codepen.io/glenhug/pen/QWrWXJY 另外，这篇文章有一个很好的解释:How to target a specific column or row in CSS Grid Layout?