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设置为子元素）

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;