Если вы знаете, что это всегда макет с двумя столбцами, используйте nth-child(odd), чтобы применить перевод к элементам сетки в первом столбце.
body {
padding: 0;
margin: 0;
}
.grid {
padding-top: 30px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
}
.grid-item {
background: #ccc;
height: 200px;
}
.grid-item:nth-child(odd) {
transform: translatey(60px);
}
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
Но, как уже отмечалось, нет необходимости использовать сетку для достижения этого макета.Вы можете легко добиться этого с помощью flexbox.
.item {
display: flex;
}
.text,
.img {
flex: 1 1 50%;
padding: 0 30px;
display: flex;
flex-direction: column;
align-self: center;
}
.img {
object-fit: cover;
width: 100%;
height: auto;
display: block;
}
.item:first-child {
padding-top: 60px;
}
.item:first-child .text {
margin-top: -60px;
align-self: flex-start;
}
.alt .text {
order: 1;
}
<div class="item alt"><div class="text"><h1>Maecenas sed tincidunt est, in ullamcorper tellus. Sed accumsan dui sem, non tempor lacus auctor interdum...</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed tincidunt est, in ullamcorper tellus. Sed accumsan dui sem, non tempor lacus auctor interdum. Nunc eget imperdiet sem. Nullam elit diam, vestibulum efficitur metus non, condimentum facilisis turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Curabitur luctus ornare nunc, vitae sodales nunc facilisis sed. Donec ultricies enim ipsum, vitae fringilla erat tincidunt a. In scelerisque tempus porttitor. Sed dictum velit et nunc sollicitudin, at semper nulla varius. In id neque molestie mi eleifend porttitor. Nam ac ante tempus, eleifend quam id, semper lectus.</div><img src="https://picsum.photos/400/300" alt="" class="img"></div>
<div class="item "><div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed tincidunt est, in ullamcorper tellus. Sed accumsan dui sem, non tempor lacus auctor interdum. Nunc eget imperdiet sem. Nullam elit diam, vestibulum efficitur metus non, condimentum facilisis turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Curabitur luctus ornare nunc, vitae sodales nunc facilisis sed. Donec ultricies enim ipsum, vitae fringilla erat tincidunt a. In scelerisque tempus porttitor. Sed dictum velit et nunc sollicitudin, at semper nulla varius. In id neque molestie mi eleifend porttitor. Nam ac ante tempus, eleifend quam id, semper lectus.</div><img src="https://picsum.photos/400/300" alt="" class="img"></div>
<div class="item alt"><div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed tincidunt est, in ullamcorper tellus. Sed accumsan dui sem, non tempor lacus auctor interdum. Nunc eget imperdiet sem. Nullam elit diam, vestibulum efficitur metus non, condimentum facilisis turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Curabitur luctus ornare nunc, vitae sodales nunc facilisis sed. Donec ultricies enim ipsum, vitae fringilla erat tincidunt a. In scelerisque tempus porttitor. Sed dictum velit et nunc sollicitudin, at semper nulla varius. In id neque molestie mi eleifend porttitor. Nam ac ante tempus, eleifend quam id, semper lectus.</div><img src="https://picsum.photos/400/300" alt="" class="img"></div>
<div class="item "><div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed tincidunt est, in ullamcorper tellus. Sed accumsan dui sem, non tempor lacus auctor interdum. Nunc eget imperdiet sem. Nullam elit diam, vestibulum efficitur metus non, condimentum facilisis turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Curabitur luctus ornare nunc, vitae sodales nunc facilisis sed. Donec ultricies enim ipsum, vitae fringilla erat tincidunt a. In scelerisque tempus porttitor. Sed dictum velit et nunc sollicitudin, at semper nulla varius. In id neque molestie mi eleifend porttitor. Nam ac ante tempus, eleifend quam id, semper lectus.</div><img src="https://picsum.photos/400/300" alt="" class="img"></div>