Column top offset in css grid

Question

I need some help with my css code. I'm using css grid. I have 2 columns. How to add a top offset for the right column?
That is result that I want to get:

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

There is just a dummy text because stackoverflow thinks there is not enough details for submit my question.

Answer 1

You can use top: 20px for the even child element. (Remember to set position: relative to child element)

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