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

时间：2018-12-20 17:07:15

标签： css css-grid

我正在尝试使用CSS网格重新创建以下屏幕截图，如果可以的话，我需要从下面的代码中进行哪些更改。

我要实现的目标：

enter image description here

到目前为止，我的CSS： 

{{1}}

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

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

如果您知道它始终是两列布局，请使用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>

相关问题
最新问题