文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS网格间距的问题

问CSS网格间距的问题
EN

Stack Overflow用户

提问于 2020-05-08 02:11:58

回答 1查看 29关注 0票数 0

我正在尝试构建一个相对简单的网格。我有9个图像，我希望以3x3的方式定位。下面是代码：https://codepen.io/chris-c-thomas/pen/xxwWGRN

不幸的是，我在行间隙中得到了额外的间隙空间，因为我认为它会拉伸一些图像。我该如何着手解决这个问题呢？

HTML

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="photos-grid">
      <img class="photo photo-1" src="https://via.placeholder.com/300x450.png" alt="">
      <img class="photo photo-2" src="https://via.placeholder.com/300x150.png" alt="">
      <img class="photo photo-3" src="https://via.placeholder.com/300x300.png" alt="">

      <img class="photo photo-4" src="https://via.placeholder.com/300x150.png" alt="">
      <img class="photo photo-5" src="https://via.placeholder.com/300x300.png" alt="">
      <img class="photo photo-6" src="https://via.placeholder.com/300x450.png" alt="">

      <img class="photo photo-7" src="https://via.placeholder.com/300x300.png" alt="">
      <img class="photo photo-8" src="https://via.placeholder.com/300x450.png" alt="">
      <img class="photo photo-9" src="https://via.placeholder.com/300x150.png" alt="">
    </div>
  </div>
</body>

</html>

SCSS

.container {
  width: 100%;
}
.photos-grid {
  display: grid;
  width: 940px;
  margin: 0 auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}
.photo {
}
.photo-1 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 3;
}

.photo-2 {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}

.photo-3 {
  grid-column: 3 / span 1;
  grid-row: 1 / span 2;
}

.photo-4 {
  grid-column: 1 / span 1;
  grid-row: 4 / span 1;
}

.photo-5 {
  grid-column: 2 / span 1;
  grid-row: 2 / span 2;
}

.photo-6 {
  grid-column: 3 / span 1;
  grid-row: 3 / span 3;
}

.photo-7 {
  grid-column: 1 / span 1;
  grid-row: 5 / span 2;
}

.photo-8 {
  grid-column: 2 / span 1;
  grid-row: 4 / span 3;
}

.photo-9 {
  grid-column: 3 / span 1;
  grid-row: 6 / span 1;
}

html

css

sass

css-grid

回答 1

Stack Overflow用户

发布于 2020-05-08 02:30:12

您可以在父容器上使用CSS column-count来实现此布局(砖石布局)。

阅读更多关于CSS列的内容：https://css-tricks.com/almanac/properties/c/column-count/

有关浏览器支持的更多详细信息，请访问：https://caniuse.com/#search=column-count

了解砖石结构布局：https://www.sitepoint.com/understanding-masonry-layout/

注意:这个答案并不是不鼓励使用CSS display:grid，而是试图简化CSS。

.photos-grid {
  column-count: 3;
  max-width: 940px;
  margin: 0 auto;
}

.photos-grid img {
  width: 100%;
  display: inline-block;
  margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
  .photos-grid {
    column-count: 2;
  }
}

@media screen and (max-width: 480px) {
  .photos-grid {
    column-count: 1;
  }
}

<div class="photos-grid">
  <img class="photo photo-1" src="https://via.placeholder.com/300x450.png" alt="">
  <img class="photo photo-2" src="https://via.placeholder.com/300x150.png" alt="">
  <img class="photo photo-3" src="https://via.placeholder.com/300x300.png" alt="">

  <img class="photo photo-4" src="https://via.placeholder.com/300x150.png" alt="">
  <img class="photo photo-5" src="https://via.placeholder.com/300x300.png" alt="">
  <img class="photo photo-6" src="https://via.placeholder.com/300x450.png" alt="">

  <img class="photo photo-7" src="https://via.placeholder.com/300x300.png" alt="">
  <img class="photo photo-8" src="https://via.placeholder.com/300x450.png" alt="">
  <img class="photo photo-9" src="https://via.placeholder.com/300x150.png" alt="">
</div>

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61664809

复制

相似问题

问CSS网格间距的问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格间距的问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格间距的问题
EN