我想在CSS中使用大小均相同但高度不相同的元素来实现网格效果。我希望下面的元素始终位于底部元素的50px处,无论接下来是什么。
我尝试使用浮点数,但该错误。因此,我尝试使用Flex,但是它仍然无法满足我的要求。
.container display: flex flex-wrap wrap align-content flex-start align-items flex-start
Try the new 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>
建立一个块级网格容器。该grid-auto-rows属性设置自动生成的行的高度。在此网格中,每行高度为50px。 该grid-gap属性是一个速记grid-column-gap和grid-row-gap。此规则在网格项目之间设置10px的间距。(不适用于物品和容器之间的区域。)该grid-template-columns属性设置显式定义的列的宽度。该符号定义重复列(或行)的模式。reeat
该 函数告诉网格在 不使容器溢出的情况下尽可能多地排列列(或行)。(这可以创建与Flex布局类似的行为。)auto-fill
flex-wrap: wrap
该minmax()函数为每列(或行)设置最小和最大大小范围。在上面的代码中,每列的宽度最小为容器的30%,最大为 可用的可用空间。的fr单元表示在网格容器中的自由空间的一小部分。相当于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-不支持当前规范;支持过时的版本 这是完整的图片:
Firefox中的超酷网格覆盖功能:在Firefox开发工具中,当您检查网格容器时,CSS声明中有一个微小的网格图标。 单击时,它会在页面上显示网格的轮廓。