我试过浮子,但那个错误.所以我尝试使用Flex,但它仍然没有做我想要的.
.container display: flex flex-wrap wrap align-content flex-start align-items flex-start
我想要的是什么：
是)我有的：
解决方法
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属性设置自动生成的行的高度.在这个网格中,每行高50px.
> grid-gap属性是网格 – 列间隙和网格 – 行间隙的简写.此规则在网格项之间设置10px的间隙. (它不适用于物品和容器之间的区域.)
> grid-template-columns属性设置显式定义列的宽度.
repeat表示法定义了重复列(或行)的模式.
auto-fill函数告诉网格尽可能多的列(或行)排列而不会溢出容器. (这可以创建与flex布局的flex-wrap：wrap相似的行为.)
minmax()函数为每列(或行)设置最小和最大尺寸范围.在上面的代码中,每列的宽度至少为容器的30％,并且最大可用空间.
fr unit表示网格容器中可用空间的一小部分.它与flexBox的flex-grow属性相当.
>在grid-row和span中,我们告诉网格项目他们应该跨越多少行.
浏览器支持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