跟flex一样,一个container包含多个item
container
行列 网格
未定义item的行列
排列方向
间距
item对齐方式
content对齐方式
area
item
对齐方式
area
网格定位
container's properties
grid-template-columns/rows
几行几列,行列的大小
1.
repeat(3,100px)
2.
repeat(3,1fr) fraction 片段 均分成3份
3.
1fr minmax(120px,1fr)
4.
100px auto 100px 剩下的大小都给auto
5.
repeat(auto-fill,100px) 容器大小不固定,自动填充
6.
100px 100px 100px
grid-template
grid-template-rows / grid-template-columns
1.
grid-template: repeat(2, 1fr) / repeat(2, 1fr); 两行,每行两列
2.
grid-template: "sidebar mainAdsaf"
"sidebar mainB";
•
item 上指定一下这个item是谁 grid-area: sidebar;
💡
grid-template-rows: repeat(auto-fill, 155px); // 这么写会出问题, 如果元素没有固定宽高的话从第二行开始高度会被自动压缩
grid-auto-rows: 150px; 用这个解决
grid-auto-rows: 150px;
grid-auto-columns/rows
grid-template-columns 属性里没有定义到的item的宽和高
grid-auto-flow
从左到右 还是从上到下. 乱序补位
1.
row
2.
row dense 放不下但是还有空间就从后面提上来一个放 乱序补位
3.
column
grid-template-area
grid-template-area:'a b c'
'd d d'
'e . e'
//按item写的顺序来,按字母分成abcde区域,.表示不分区
row-gap column-gap gap
间距
items
每一个item的对其方式
1.
justify-items
2.
align-items
3.
place-items 前两个合起来
值
start end center startch
定义这个之后如果item没定义宽度就会按最小的来
content
所有的item 叫content, 说的是整体的展现方式
1.
justify-content
2.
align-content
start end center stretch space-around space-between space-evenly
items's properties
占网格线起始
1.
grid-column-start
2.
grid-column-end
3.
grid-row-start
4.
grid-row-end
值
1.
数字 3个item4条线. 指定某条线就好.
2.
span 2 不指定某根网格线了,直说占几格
例子
grid-column: 1 / 3
终极简写
gird-area:1 / 1 / 3 / 3 先column后row
区域
grid-area:a
指定元素放在哪个区域
对齐方式
justify-self:
align-self
place-self
评论区