grid布局
[DOC]
grid布局
在网页中构建一个表格,将内容放到表格中进行布局
用法:
- display:grid;块级grid容器
- display:inline-grid; 行内块级grid容器
定义行与列
-
每行行高 grid-template-rows
-
- grid-template-rows:150px 150px; 两行,每行高150px
-
- grid-template-rows:repeat(2,150px);效果同上
-
-
每列列宽 grid-template-columns
-
- grid-template-columns: 150px 150px;两列,每列宽150px
-
- grid-template-columns:repeat(2,150px);效果同上
-
-
repeat() 设置重复值
可以repeat(2,100px)两个每个100
也可repeat(2,100px 200px) 一个100px一个200px 重复两遍
-
auto-fill 自动填充行或列
grid-template-rows:repeat(auto-fill,100px) 每行100px,行数根据容器行高自动填充
-
fr 按比例划分
grid-template-rows:1fr 1fr;分两份各占一份
也可以 grid-template-rows: repeat(2,1fr)
grid-template-rows:100px 1fr 100px;上下各100px ,中间自适应
grid-template-columns:100px 1fr;左边100px,右边适应屏幕
gap 行间距列间距
gap:10px;行间距列间距=10
gap:10px 15px;行间距10 列间距15
网格线坐标
将某个div移动到容器中的某个位置
grid-row-start 行开始
grid-row-end 行结束
grid-column-start 列开始
grid-column-start 列结束
列如.将一个1放到 6
横/纵坐标:
1 2 3 4
▔▔▔▔▔▔▔▔▔▔▏|▔▔▔▔▔▔▔▔▔▔▏|▔▔▔▔▔▔▔▔▔▔▏ 1
▏1:div:one ▏| 2 ▏| 3 ▏
▏| ▏| ▏
▏ ▏| ▏| ▏
▔▔▔▔▔▔▔▔▔▔ ▔▔▔▔▔▔▔▔▔▔▔ ▔▔▔▔▔▔▔▔▔▔ 2
▔▔▔▔▔▔▔▔▔▔▏|▔▔▔▔▔▔▔▔▔▔▏|▔▔▔▔▔▔▔▔▔▔▏
▏ 4 ▏| 5 ▏| 6 ▏
▏ ▏| ▏| ▏
▏ ▏| ▏| ▏ 3
▔▔▔▔▔▔▔▔▔▔ ▔▔▔▔▔▔▔▔▔▔▔ ▔▔▔▔▔▔▔▔▔▔▔
▔▔▔▔▔▔▔▔▔▔▏|▔▔▔▔▔▔▔▔▔▔▏|▔▔▔▔▔▔▔▔▔▔▏
▏ 7 ▏| 8 ▏| 9 ▏
▏ ▏| ▏| ▏
▏ ▏| ▏| ▏ 4
▔▔▔▔▔▔▔▔▔▔ ▔▔▔▔▔▔▔▔▔▔ ▔▔▔▔▔▔▔▔▔▔▔
.one{
grid-row-start:3;
grid-row-end:4;
grid-column-start:2;
grid-column-start:3;
}
在上一个元素移动之后,元素位置并不会空出而是由下一个元素补上
网格线命名
在设置行高列宽时为其命名
1.直接命名
grid-template-rows:[x1] 100px [x2] 100px [x3] 100px [x4];
grid-template-columns:[y1] 100px [y2] 100px [y3] 100px [y4];
x1 x2 x3 x4
| | | |
|▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|▔▔y1
|1:div:one| 2 | 3 |
| | | |
| | | |
|▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|▔▔y2
| 4 | 5 | 6 |
| | | |
| | | |
|▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|▔▔y3
| 7 | 8 | 9 |
| | | |
| | | |
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔y4
-
通过网格线进行位移
.ond{
grid-row-start:x3;
grid-row-end:x4;
grid-column-start:y3;
grid-column-end:y4;
}
2.repeat()命名
grid-template-rows:repeat(3,[x] 100px [x-end])
grid-template-columns:repeat(3,[y] 100px [y-end])
-
通过网格线进行位移
.ond{
grid-row-start:x 3;
grid-row-end:x 4;
grid-column-start:span 1;
grid-column-end:span 3;
}
简写属性 grid-row & grid-column
- grid-row 第一个值表示grid-row-start,第二个值表示grid-row-end,两个值用
/间隔 - grid-column 第一个值grid-column-start,第二个值grid-column-end
span关键字 横/纵跨越指定单元格
grid-row:1/span 1;
grid-column:1/ span 3;从1开始占据1整行,即格子123的位置
grid-row: 2 / span 2;
grid-column: 2 / span 1;
grid-area 设置具体单元格位置
grid-area:开始行 开始列 结束行 结束列;
可以给每个元素设置所占位置
grid-template-areas区域命名
grid-area 设置占据整行
按照格子位置命名
div{
width:500px;
height:500px;
display:grid;
grid-template-rows:repeat(3,1fr);
grid-template-columns:repeat(3,1fr);
grid-template-areas:'header header header' 'nav1 nav2 nav3' 'footer footer footer';
/* //上下两块分别叫header footer ,中间被分成三部分分别命名为nav1 nav2 nav3 */
}
header{
grid-area:header;
background:#222;
}
如某些区域不想命名则用 '. '占位
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|
| | | |
| header | header | header |
| | | |
| | | |
|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|
| | | |
| nav1 | nav2 | nav3 |
| | | |
| | | |
|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|
| | | |
| footer | footer | footer |
| | | |
| | | |
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
grid-auto-flow 改变排列方式
默认排列方式:grid-auto-flow:row;
竖直排列 :grid-auto-flow:column;
grid-auto-flow:row dense; 当存在剩余空间时强制填满
justify-content 调整元素在容器中水平位置
align-content 元素在容器之中垂直位置
属性值
-
start默认值。项目位于容器的开头。 -
end项目位于容器的结尾。 -
center项目位于容器的中心。 -
space-between项目位于各行之间留有空白的容器内。 -
space-around项目位于各行之前、之间、之后都留有空白的容器内。
justify-content:center;
align-content:end;
可简写为place-content:end center ;
place-content:align-content justify-content
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|
| 1 | 2 | 3 |
| | | |
| | | |
| | | |
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
justify-items & align-items 元素在单元格中的位置 水平方向位置&垂直方向位置
justify-items:center;
align-items:center;
每个元素在单元格内水平垂直居中
可简写为place-items:center center;
place-items:align-items justify-items
justify-self & align-self 单独设置元素在某个单元格中的位置
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|
| | | |
| 1 | 2 | 3 |
| | | |
| | | |
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
justify-self:end;
align-self:end;//元素在容器右下角
可简写为 place-self:end end;
place-self:align-self justify-self
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|▔▔▔▔▔▔▔▔▔▔|
| | | |
| | 2 | 3 |
| | | |
| 1 | | |
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
