logo标签列表

CSS网格：固定高度和可变宽度

htmlcsscss-grid
10

我正在尝试使用CSS Grid制作图像库。我需要像这样的内容：

THIS

但是我只能实现这个JSFiddle。

问题是，DIV占据了所有剩余的空间，而我不想要这样。

#gallery {
  background: #cfc;
  padding: 32px;
  display: grid;
  grid-auto-rows: 350px;
  grid-template-columns: repeat(auto-fit, auto);
  grid-gap: 10px;
}

.cell {
  background: #fcc;
}

.cell>img {
  height: 100%;
}
<div id="gallery">
  <div class="cell">
    <img src="http://via.placeholder.com/350x500" />
  </div>
  <div class="cell">
    <img src="http://via.placeholder.com/250x150" />
  </div>
  <div class="cell">
    <img src="http://via.placeholder.com/150x150" />
  </div>
  <div class="cell">
    <img src="http://via.placeholder.com/370x150" />
  </div>
</div>

500像素高的图片应该缩小到150像素高吗？ - crenshaw-dev
2
因为网格是针对单元格而不是图像定义的。 - Temani Afif
为什么不使用Flexbox呢？ - Dhaval Jardosh
你的网格应该有5列。并且一些单元格跨越两列。 - c-smile
好的，所以我放弃了那个想法，因为它需要很多巧妙的技巧或库来实现。 - pauliucxz
3个回答
1

请看以下代码：

.parent {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 8px;
grid-row-gap: 8px;
}

.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 1 / 3 / 2 / 6; }
.div3 { grid-area: 1 / 6 / 2 / 10; }
.div4 { grid-area: 2 / 1 / 3 / 4; }
.div5 { grid-area: 2 / 4 / 3 / 8; }
.div6 { grid-area: 2 / 8 / 3 / 10; }

.box {
  background-color: #444;
  height: 150px;
}
<div class="parent">
<div class="div1 box"> </div>
<div class="div2 box"> </div>
<div class="div3 box"> </div>
<div class="div4 box"> </div>
<div class="div5 box"> </div>
<div class="div6 box"> </div>
</div>

0

可以在此jsfiddle找到纯CSS解决方案。

HTML

<div class="wrap">
    <div class="flex-c">
        <div class="flex-i big"></div>
        <div class="flex-i red"></div>
        <div class="flex-i big green"></div>
        <div class="flex-i green"></div>
        <div class="flex-i red"></div>
        <div class="flex-i blue"></div>
        <div class="flex-i green"></div>
        <div class="flex-i red"></div>
        <div class="flex-i blue"></div>
        <div class="flex-i green"></div>
        <div class="flex-i red"></div>
        <div class="flex-i blue"></div>
        <div class="flex-i green"></div>
        <div class="flex-i red"></div>
        <div class="flex-i blue"></div>
        <div class="flex-i green"></div>
        <div class="flex-i red"></div>
        <div class="flex-i blue"></div>
        <div class="flex-i green"></div>
        <div class="flex-i red"></div>
        <div class="flex-i blue"></div>
    </div>
</div>

CSS

.flex-c:after {
    content: '';
    display: table;
    clear: both;
}
.flex-i.red { background-color: red; }
.flex-i.blue {background-color: blue; }
.flex-i.green {background-color: green;}
.flex-i {
    transform: rotate(90deg) scaleY(-1);
    height: 100px;
    width: 100px;
    background-color: gray;
    margin: 0 10px 10px 0;
    float: left;
}
.flex-i:after,
.flex-i.big:before {
    content: '';
    height: 100px;
    width: 100px;
    left: 110px;
    top: 0;
    position: absolute;
    background-color: pink;
}

.flex-i.big:after {
    left: 220px;
}
.flex-i.big:before {
    left: 220px;
    bottom: 0;
    top: auto;
}

.big {
    width: 210px;
    height: 210px;
}

此外

您可能会受益于使用像Isotopes JS砌体布局这样的库。

它可以帮助您生成您展示过的布局样式。

以下是一个可工作的示例。

HTML

<div id="container">
    <div class="item"></div>
    <div class="item w2"></div>
    <div class="item"></div>
    <div class="item w2"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h2"></div>
    <div class="item w2 h2"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item w2"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h2"></div>
</div>

CSS

#container {
    border: 1px solid;
    padding: 7px;
}

.item {
    width: 60px;
    height: 60px;
    float: left;
    margin: 3px;
    background: #CCC;
}

.item.w2 {
    width: 130px;
}

.item.h2 {
    height: 130px;
}

JS - 请注意，您需要将砖石网格应用于父元素，这种情况下是容器的ID。
$( function() {
    var $container = $('#container').masonry({
        itemSelector: '.item',
        columnWidth: 70
    });
});

在这里查看jsFiddle

这并没有提供问题的答案。一旦你有了足够的声望，你就可以在任何帖子下发表评论；相反，提供不需要进一步澄清的答案。- 来自审阅 - Samvel Aleqsanyan
@SamvelAleqsanyan，此帖子中已更新一个可工作的示例。更多配置选项可在提供的IsotopeJS链接上找到。 - schmitty890
@schmitty890，原帖作者正在寻找CSS Grid解决方案，而不是IsotopJS解决方案。 - Mike Diglio
@MikeDiglio，除了IsotopeJS解决方案外，现已添加了一个纯CSS解决方案。建议使用IsotopeJS库，因为它专门为开发人员处理此功能。 - schmitty890
@SamvelAleqsanyan 我将开始回答那些不需要提问者澄清的问题，因为我在js/html/css/jquery领域拥有丰富的经验。如果您想了解更多信息，请阅读Isotope.js库的文档，它提供了一个使用javascript库解决这个特定问题的解决方案。否则，如果该库无法在应用程序中使用，我已经提供了一个纯css解决方案。 - schmitty890
0

所以，既然你特别想使用CSS网格来实现这个，这不完全是你想要的，但也许可以：

您可以完全放弃DIVS，直接使用图像，并通过在.cell类中设置height: 350px;来设置行高（该类已移动到应用于图像）。

此外，.galary将是一个flexbox，启用flex-wrap选项，以便每个溢出的项目都会开始新一行。

最后，将flex-grow:1;添加到.cell（img标记），以便它们填补其行中的任何空白空间。

* 在代码片段中，我还添加了object-fit：cover;到图像，但这将隐藏任何溢出部分的图像，因此您可以尝试并查看适合您的内容。

#gallery {
  background: #cfc;
  padding: 32px;
  display: grid;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cell {
  background: #fcc;
  flex-grow: 1;
  object-fit: cover;
}
<div id="gallery">
    <img class="cell" src="http://via.placeholder.com/350x500" />
    <img class="cell" src="http://via.placeholder.com/250x150" />
    <img class="cell" src="http://via.placeholder.com/150x150" />
    <img class="cell" src="http://via.placeholder.com/370x150" />
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接