我想在 CSS 中使用宽度相同但高度不同的元素实现网格效果。我希望下面的元素始终位于底部元素的 50px 处,无论下一个元素是什么。
我尝试使用 float ,但是那个错误。所以我尝试使用 Flex,但它仍然无法满足我的要求。
.container
display: flex
flex-wrap wrap
align-content flex-start
align-items flex-start
我想要什么:
我有什么:
最佳答案
尝试新的 CSS Grid Layout :
grid-container {
display: grid; /* 1 */
grid-auto-rows: 50px; /* 2 */
grid-gap: 10px; /* 3 */
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* 4 */
}
[short] {
grid-row: span 1; /* 5 */
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
<grid-container>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
</grid-container>
jsFiddle demo
工作原理:
- Establish a block-level grid container.
grid-auto-rows
属性设置自动生成的行的高度。在此网格中,每行高 50 像素。grid-gap
property 是grid-column-gap
和grid-row-gap
的简写。此规则在 网格项之间设置了 10 像素的间距。 (不适用于元素与容器之间的区域。)grid-template-columns
属性设置明确定义的列的宽度。repeat
符号定义重复列(或行)的模式。auto-fill
函数告诉网格在不溢出容器的情况下排列尽可能多的列(或行)。 (这可以创建与 flex 布局的flex-wrap: wrap
类似的行为。)minmax()
函数为每列(或行)设置最小和最大大小范围。在上面的代码中,每列的宽度最小为容器的 30%,最大为可用空间的宽度。fr
unit表示网格容器中可用空间的一部分。它相当于 flexbox 的flex-grow
属性。
浏览器对 CSS 网格的支持
- Chrome - 自 2017 年 3 月 8 日起全面支持(第 57 版)
- Firefox - 自 2017 年 3 月 6 日起全面支持(第 52 版)
- Safari - 截至 2017 年 3 月 26 日的全面支持(版本 10.1)
- Edge - 截至 2017 年 10 月 16 日的全面支持(第 16 版)
- IE11 - 不支持当前规范;支持过时版本
这是完整的图片:http://caniuse.com/#search=grid
Firefox 中很酷的网格覆盖功能:在 Firefox 开发工具中,当您检查网格容器时,CSS 声明中有一个小网格图标。单击它会在页面上显示网格的轮廓。
此处有更多详细信息:https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
关于css - 使用 flexbox(或其他 CSS)创建 Masonry 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43901955/