grid网格属性是css3中新增的,方便构建各种网格布局需求。grid有点像tables,可以做到行、列页面布局和对齐。在语义化、页面流加载达到更优的效果。
基础示例
HTML
<div class="wrapper"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> <div class="six">Six</div> </div>CSS
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } .one { grid-column: 1 / 3; grid-row: 1; } .two { grid-column: 2 / 4; grid-row: 1 / 3; } .three { grid-row: 2 / 5; grid-column: 1; } .four { grid-column: 3; grid-row: 3; } .five { grid-column: 2; grid-row: 4; } .six { grid-column: 3; grid-row: 4; }
Grid Row、Grid Column
设置网格布局中的行列,分别具有grid-auto-rows,grid-template-rows和grid-auto-columns,grid-template-columns自动大小属性。在设置相关性时,还可以设置其grid cell属性。
如下示例
.wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 100px; }<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
Grid Areas
网格区域是构成网格上矩形区域的一个或多个网格单元格。当您使用行放置项目或使用命名网格区域定义区域时, 将创建网格区域。显示突出显示的网格区域的图像,网格区域在本质上必须是长方形的;例如, 不可能创建 t 形或 l 型网格区域。
在下面的示例中, 我有一个带有两个网格项的网格容器。我用网格区域属性命名这些, 然后使用网格模板区域将它们放在网格上。这将创建两个网格区域, 一个覆盖四网格单元, 另外两个。
.wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 100px 100px; grid-template-areas: "a a b" "a a b"; } .item1 { grid-area: a; } .item2 { grid-area: b; }
<div class="wrapper"> <div class="item1">Item</div> <div class="item2">Item</div> </div>
转载请注明:TUTERM.COM » 如何get新技能,在未来css中使用grid风格布局