<div class="grid">
<div class="grid__item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque dignissimos necessitatibus officia nesciunt sequi in beatae culpa alias odit voluptatibus temporibus sed modi quos neque ipsam sit, veniam, quia possimus.</div>
<div class="grid__item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque diga alias odit voluptatibus temporibus sed modi quos neque ipsam sit, veniam, quia possimus.</div>
<div class="grid__item">Lorem ipsum dolor sit, amet consectetur adipisit sequi in beatae culpa alias odit voluptatibus temporibus sed modi quos neque ipsam sit, veniam, quia possimus.</div>
<div class="grid__item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumqu ficia nesciunt sequi in beatae culpa alias odit voluptatibus temporibus sed modi quos neque ipsam sit, veniam, quia possimus.</div>
<div class="grid__item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque dignissimos necessitatibus officia nesciunt sequi in beatae culpa a</div>
<div class="grid__item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumqu ficia nesciunt sequi in s odit voluptatibus temporibus sed modi quos neque ipsam sit, veniam, quia possimus.</div>
</div>
* {
box-sizing: border-box;
}
.grid {
display: flex;
flex-wrap: wrap;
}
.grid__item {
width: 33.333%;
padding: 15px;
outline: 1px dashed tomato;
}
.grid__item:nth-child(3n - 1) {
transform: translateY(25px);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.