css - css 网格中的列顶部偏移

Question

我的 CSS 代码需要一些帮助。我正在使用 CSS 网格。我有 2 列。如何为右列添加顶部偏移量？
这是我想要得到的结果:

.parent {
  background-color:#ddd;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.child {
  background-color:#aaa;
  padding:15px;
}

<div class="parent">
  <div class="child">
    <h1>title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
  </div>
  <div class="child">
    <h1>title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
  </div>
  <div class="child">
    <h1>title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, </p>
  </div>
  <div class="child">
    <h1>title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus? in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus? in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
  </div>
  <div class="child">
    <h1>title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
  </div>
  <div class="child">
    <h1>title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
  </div>
</div>

只有一个虚拟文本，因为 stackoverflow 认为没有足够的详细信息来提交我的问题。

Answer 1

您可以对偶数子元素使用top: 20px。 (记得给子元素设置position: relative)

.parent {
  background-color: #ddd;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  padding-bottom: 20px;
}

.child {
  background-color: #aaa;
  padding: 15px;
}

.child:nth-of-type(even) {
  top: 20px;
  position: relative;
}

<div class="parent">
  <div class="child">
    <h1>title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
  </div>
  <div class="child">
    <h1>title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
  </div>
  <div class="child">
    <h1>title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, </p>
  </div>
  <div class="child">
    <h1>title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus? in quam quae adipisci
      vel culpa quibusdam, iure expedita nam doloribus? in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
  </div>
  <div class="child">
    <h1>title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
  </div>
  <div class="child">
    <h1>title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
  </div>
</div>