使用CSS网格重新创建一个交错布局

Question

我试图重新使用CSS网格下面的截图，这是可能的，如果有什么我需要从我下面的代码更改。

我想达到的目标：

到目前为止，我的CSS：

.alt-Cards {
 padding-top: 60px;
 padding-bottom: 60px;
 position: relative;

 &::before {
   content: '';
   display: block;
   position: absolute;
   top: 420px;
   right: 0;
   left: 0;
   bottom: 0;
   background: #e4e4e4;
  }
}

.alt-Cards_Inner {
 max-width:1440px;
 width: 100%;
 margin:0 auto;
}

.alt-Cards_Grid {
 display: grid;
 position: relative;
 grid-template-columns: repeat(2, 1fr);
 grid-column-gap: 60px;
 grid-row-gap: 60px;
}

.alt-Cards_GridItem-Titles {
  grid-column-start: 2;
}

的jsfiddle http://jsfiddle.net/2wztvqox/

Answer 1

.container {
  width:960px;
  margin:0 auto;
  box-shadow:0 0 10px 0 rgba(0,0,0,.5);
  background:linear-gradient(to bottom, #fff 0%, #fff 20%, #e0e0e0 20%, #e0e0e0 100%);
  padding:50px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns: 405px 405px;
  grid-gap:50px;
}

.left, .right {
  display:flex;
  justify-content:flex-start;
  align-items:center;
  flex-direction:column;
}

.left {
  margin-top:100px;
}

.left img, .right img {
  width:100%;
  margin:20px 0;
}

<div class="container">
  <div class="left">
    <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
    </div>
    <img src="https://picsum.photos/300/200" alt="">
    <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
    </div>
     <img src="https://picsum.photos/300/200" alt="">
    <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
    </div>
     <img src="https://picsum.photos/300/200" alt="">
    <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
    </div>
     <img src="https://picsum.photos/300/200" alt="">
    <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
    </div>
     <img src="https://picsum.photos/300/200" alt="">
    <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
    </div>
     <img src="https://picsum.photos/300/200" alt="">
    <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
    </div>
     <img src="https://picsum.photos/300/200" alt="">
  </div>
  <div class="right">
        <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
    </div>
     <img src="https://picsum.photos/300/200" alt="">
    <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
    </div>
     <img src="https://picsum.photos/300/200" alt="">
    <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
    </div>
     <img src="https://picsum.photos/300/200" alt="">
    <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
    </div>
     <img src="https://picsum.photos/300/200" alt="">
    <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
    </div>
     <img src="https://picsum.photos/300/200" alt="">
    <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
    </div>
     <img src="https://picsum.photos/300/200" alt="">
    <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
    </div>
     <img src="https://picsum.photos/300/200" alt="">
  </div>
</div>

Answer 2

如果你知道，它总是一个2列布局，使用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>