CODEWITHSUNDEEP
csscss-grid
fiter
fiter

Reputation: 773

Column top offset in css grid

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:

img

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

Upvotes: 4

Views: 720

Answers (1)

Bhuwan
Bhuwan

Reputation: 16855

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>

Upvotes: 9

Related Questions