代码之家  ›  专栏  ›  技术社区  ›  egr103

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

  •  -3
  • egr103  · 技术社区  · 6 年前

    我正在尝试使用CSS网格重新创建下面的屏幕截图,如果可能的话,我需要从下面的代码中更改什么。

    我想实现的目标:

    enter image description here

    到目前为止我的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/

    2 回复  |  直到 6 年前
        1
  •  1
  •   doğukan    6 年前

    .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>
        2
  •  0
  •   ksav    6 年前

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