[英]CSS Grid fixed height and variable width
I'm trying to make a gallery of images using CSS Grid.我正在尝试使用 CSS 网格制作图片库。 I need something like this:
我需要这样的东西:
But all can achieve is this JSFiddle .但是所有可以实现的就是这个JSFiddle 。
Problem is, that DIVs take up all the remaining space, and I don't want that.问题是,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>
Pure CSS solution can be found in this jsfiddle纯 CSS 解决方案可以在这个jsfiddle中找到
HTML 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 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;
}
Additionally此外
You may be able to benefit from using a library such as Isotopes JS masonry layout您可能会受益于使用诸如Isotopes JS masonry layout之类的库
It assists you to produce a layout style that you've shown.它可以帮助您生成已显示的布局样式。
Here is a working example.这是一个工作示例。
HTML 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 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 - note that you have to apply the masonry to the parent element, which in this case is the id of container JS - 请注意,您必须将砌体应用到父元素,在本例中是容器的 id
$( function() {
var $container = $('#container').masonry({
itemSelector: '.item',
columnWidth: 70
});
});
View the jsFiddle here在此处查看 jsFiddle
Look at the following Code:看下面的代码:
.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>
So since you specifically wanted to achieve this using CSS grid, this isn't exactly what you wanted, but perhaps it will do:因此,由于您特别想使用 CSS 网格来实现此目的,因此这并不是您想要的,但也许可以:
you can drop the DIVS entirely, use the images directly and set the row height by setting height: 350px;
您可以完全放弃DIVS,直接使用图像并通过设置
height: 350px;
within .cell
class (that is moved to apply on the images).在
.cell
中(已移动以应用于图像)。
In addition, the .galary
will be a flex, with flex-wrap enabled so that every item that overflows will start a new line.此外,
.galary
将是一个 flex,启用了 flex-wrap 以便每个溢出的项目都将开始一个新行。
And last, add flex-grow:1;
最后,添加
flex-grow:1;
to .cell
(the img tags) so they will take up any empty space in their line.到
.cell
(img 标签),这样它们将占用行中的任何空白空间。
* In the snippet, I've also added object-fit: cover;
* 在代码片段中,我还添加了
object-fit: cover;
to the images, but this will hide any overflowing part of the image, so you play with it and see what fits for you到图像,但这会隐藏图像的任何溢出部分,所以你玩它看看什么适合你
#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.