主页 / 问题 / 1276192
Accepted
Krovorgen
Asked:2022-04-29 03:51:12 +0000 UTC2022-04-29 03:51:12 +0000 UTC

使用网格从图片平铺

  • 772

ul,
ol {
    padding: 0;
}

ul {
    list-style: none;
}


img {
    display: block;
    max-width: 100%;
}

.gallery__examples {
    display: grid;
    grid-template: 280px / 580px 290px 250px;
    gap: 40px;
}
<ul class='gallery__examples'>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/580x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/290x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/250x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/250x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/290x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/580x280/000/fff' alt='Фоточка'>
      </li>
  </ul>

再会！请告诉我如何按照屏幕截图所示排列带有图片的瓷砖。有一个附加类和属性的想法 grid-column: 1/3 grid-row: 1/2; 但是仍然可以添加瓷砖，这是必须预见的。580px 290px 250px 1 line 250px 290px 580px 2 line 这个顺序会交替。我会很高兴得到任何帮助！ 在此处输入图像描述

html

1 个回答

  1. Best Answer

    如果照片网格的每一行看起来都一样，那么：

    .wrapper {
  display: grid;
  grid-template: auto / 250px 290px 290px 250px;
  grid-gap: 40px;  
}

.image {
  height: 80px;
  background: blue;
}

.image:nth-child(1), .image:nth-child(6n), .image:nth-child(7n){
  grid-column: span 2;
}
    <div class="wrapper">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>  
</div>

    • 4

相关问题