目前还是实验属性,其引入了二维网格布局系统,可用于布局页面主要的区域布局或小型组件。包含以下属性:
Fixed and flexible track sizes 固定像素或者弹性的单元格
Item placement 可以指定网格元素的位置或者算法计算位置
Creation of additional tracks to hold content 创建容纳内容的网格块
Alignment control 对齐控制
Control of overlapping content 溢出内容控制
Grid 容器 1 2 3 4 5 6 7 <div class ="wrapper" > <div > One</div > <div > Two</div > <div > Three</div > <div > Four</div > <div > Five</div > </div >
1 2 3 4 .wrapper { display : grid; grid-template-columns : 200px 200px 200px ; }
grid-template-columns
设置多列元素的每列宽度;Grid引入新单位fr,表示fraction,页面可用空间的比例。单位也可以混合使用,如grid-template-columns: 500px 1fr 2fr;
可用repeat()来定义多个等宽单元格。grid-template-columns: repeat(3, 1fr);
同样可混合使用。repeat(5, 1fr 2fr)
表示(1fr 2fr)*5
同理 grid-template-rows设置每行高度
grid-auto-rows grid-auto-columns
则设置行高/列宽,minmax(100px,auto)
设置最小和最大宽高
Grid Lines 从上至下,从左至右分别从1开始递增。 负数则从下至上,从右至左从-1开始递减。 网格定位是基于网格线,使用grid-column-start, grid-column-end, grid-row-start and grid-row-end
属性
1 2 3 4 5 6 7 <div class ="wrapper" > <div class ="box1" > One</div > <div class ="box2" > Two</div > <div class ="box3" > Three</div > <div class ="box4" > Four</div > <div class ="box5" > Five</div > </div >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .wrapper { display : grid; grid-template-columns : repeat (3 , 1 fr); grid-auto-rows : 100px ; } .box1 { grid-column-start : 1 ; grid-column-end : 4 ; grid-row-start : 1 ; grid-row-end : 3 ; } .box2 { grid-column-start : 1 ; grid-row-start : 3 ; grid-row-end : 5 ; }
该属性可以简写为:
1 2 grid-column : grid-column-start / grid-column-end; grid-row : grid-row-start / grid-row-end;
另外如果网格只占一行或者一列,则grid-row-end和grid-column-end可以省略。进一步缩写为:
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
1 2 3 4 5 6 7 8 9 10 11 12 .box1 { grid-area : 1 / 1 / 4 / 2 ; } .box2 { grid-area : 1 / 3 / 3 / 4 ; } .box3 { grid-area : 1 / 2 / 2 / 3 ; } .box4 { grid-area : 3 / 2 / 4 / 4 ; }
线条可以被命名然后网格使用 grid-area
或者grid-column/row-start/end
来定位。
Grid Cells 网格系统的最小单元,
Grid areas 网格内容跨越多行多列时,成为网格区域。
Gutters 沟槽,网格之间的缝隙grid-column-gap
和grid-row-gap
。简写为grid-gap:grid-row-gap grid-column-gap;
span关键词 在行列定位时拓展宽度或者高度 grid-row: 1 / span 3;
=grid-row: span 3 / 4;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .box1 { grid-column : 1 ; grid-row : 1 / span 3 ; } .box2 { grid-column : 3 ; grid-row : 1 / span 2 ; } .box3 { grid-column : 2 ; grid-row : 1 ; } .box4 { grid-column : 2 / span 2 ; grid-row : 3 ; }
grid-template-areas 1 2 3 4 5 6 <div class ="wrapper" > <div class ="header" > Header</div > <div class ="sidebar" > Sidebar</div > <div class ="content" > Content</div > <div class ="footer" > Footer</div > </div >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 .header { grid-area : hd; } .footer { grid-area : ft; } .content { grid-area : main; } .sidebar { grid-area : sd; } .wrapper { display : grid; grid-template-columns : repeat (9 , 1 fr); grid-auto-rows : minmax (100px , auto); grid-template-areas : "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" ". . . ft ft ft ft ft ft" ; }
简写为:
1 grid-template: grid-template-areas grid-template-rows / grid-template-columns
1 2 3 4 5 6 7 8 .wrapper { display : grid; grid-template : "hd hd hd hd hd hd hd hd hd" minmax (100px , auto) "sd sd sd main main main main main main" minmax (100px , auto) "ft ft ft ft ft ft ft ft ft" minmax (100px , auto) / 1 fr 1 fr 1 fr 1 fr 1 fr 1 fr 1 fr 1 fr 1 fr ; }
grid-auto-flow Grid布局中出现gap或者乱序时,一般按照宽松的原则按顺序进行排序;设置为grid-auto-flow: dense;
能够切换成紧密布局。
grid对齐方式 块/列轴与内联/行轴 网格容器可设置align-items
属性,可选值有auto normal start end center stretch baseline first baseline last baseline。 网格元素可设置align-self
属性。align-items align-self
是对列轴进行对齐的,justify-items justify-self
则能够对行轴进行对齐。
如果网格容器大于网格内容,可使用align-content justify-content
进行对齐。
则布局变为:
z-index 布局中出现层叠时,用z-index控制z轴显示。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 .box1 { grid-column-start : 1 ; grid-column-end : 4 ; grid-row-start : 1 ; grid-row-end : 3 ; z-index : 2 ; } .box2 { grid-column-start : 1 ; grid-row-start : 2 ; grid-row-end : 4 ; z-index : 1 ; }
网格方向 writing-mode
控制整体的方向,包括文字网格等direction
控制显示方向
嵌套网格 嵌套网格是不继承属性的,且需要保证父网格有足够的面积容纳子网格。
Subgrid 目前浏览器还没有实现
网格布局的响应式设计 实现上述响应式布局,用两种方式。一种是grid-template-areas来实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div class ="wrapper" > <header class ="main-head" > The header</header > <nav class ="main-nav" > <ul > <li > <a href ="" > Nav 1</a > </li > <li > <a href ="" > Nav 2</a > </li > <li > <a href ="" > Nav 3</a > </li > </ul > </nav > <article class ="content" > <h1 > Main article area</h1 > <p > In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p > </article > <aside class ="side" > Sidebar</aside > <div class ="ad" > Advertising</div > <footer class ="main-footer" > The footer</footer > </div >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 .main-head { grid-area : header; } .content { grid-area : content; } .main-nav { grid-area : nav; } .side { grid-area : sidebar; } .ad { grid-area : ad; } .main-footer { grid-area : footer; } .wrapper { display : grid; grid-gap : 20px ; grid-template-areas : "header" "nav" "content" "sidebar" "ad" "footer" ; } .wrapper > * { border : 2px solid #EB3939 ; border-radius : 2px ; background : #F1A2A2 ; } @media (min-width : 500px ) { .wrapper { grid-template-columns : 1 fr 3 fr; grid-template-areas : "header header" "nav nav" "sidebar content" "ad footer" ; } nav ul { display : flex; justify-content : space-between; } } @media (min-width : 700px ) { .wrapper { grid-template-columns : 1 fr 4 fr 1 fr; grid-template-areas : "header header header" "nav content sidebar" "nav content ad" "footer footer footer" } nav ul { flex-direction : column; } }
一种是用12列流动布局来实现。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 .wrapper { display : grid; grid-template-columns : repeat (12 , [col-start] 1 fr); grid-gap : 20px ; } .wrapper > * { grid-column : col-start / span 12 ; border : 2px solid #EB3939 ; border-radius : 2px ; background : #F1A2A2 ; } @media (min-width : 500px ) { .side { grid-column : col-start / span 3 ; grid-row : 3 ; } .ad { grid-column : col-start / span 3 ; grid-row : 4 ; } .content , .main-footer { grid-column : col-start 4 / span 9 ; } nav ul { display : flex; justify-content : space-between; } } @media (min-width : 700px ) { .main-nav { grid-column : col-start / span 2 ; grid-row : 2 / 4 ; } .content { grid-column : col-start 3 / span 8 ; grid-row : 2 / 4 ; } .side { grid-column : col-start 11 / span 2 ; grid-row : 2 ; } .ad { grid-column : col-start 11 / span 2 ; grid-row : 3 ; } .main-footer { grid-column : col-start / span 12 ; } nav ul { flex-direction : column; } }