这篇笔记整合了一些其他的学习笔记内容，主要用于快速复习Grid布局。
display: grid
grid-template-columns & grid-template-rows
grid-column-start + grid-column-end
justify-self | align-self | place-self -- align-self justify-self
grid-column-gap | grid-row-gap | grid-gap -- grid-column-gap grid-row-gap
justify-items | align-items | place-items -- align-items justify-items
justify-content | align-content
表格布局由两层组成，父层grid和子层item
<div class="grid">
<div class="item"></div>
<div class="item"></div>
</div>
.grid {
display: grid;
//一个内联网格
display: inline-grid;
}
定义行列
定义列grid-template-columns
定义行grid-template-rows
定义一个三列两行的表格 ≡≡≡ 长这样……
.grid {
display: grid;
// 第一列到第三列的宽度，比如 100px 50px 100px
grid-template-columns: c1 c2 c3;
//第一行第二行的高度
grid-template-rows: r1 r2;
}
当item不够columns x rows的数量时，只显示columns x rows的数量，当增加了数量时才会别填满。
除了数值，还可以用百分比、网格可用空间fr来表示，同时还可以设置line-name。
.grid {
grid-template-columns: 25% 100px auto;
//定义一条网格线，可以有多个名称
grid-template-rows: [row1-start] 20% [row2-end row2-start] 25% [row2-end];
//还可以用repeat方法来设置线
grid-template-columns: repeat(3, 20px [col-start])
//等价于
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
//fr是剩余可用空间
grid-template-columns: 1fr 1fr 1fr;
//减去非fr后计算得剩余空间，下面是减掉50后三等分
grid-template-columns: 1fr 50px 1fr 1fr;
}
定位子元素的大小使用
定义列开始grid-column-start
定义列结束grid-column-end
//这个是按照数线的方式来定义的
//比如一个两行两列的表格田
//最左边是一条线，中间一条，右边一条
//总共就是三条线
//所以当start:1，end:3的时候这个item就占了两列的高度。
//口≡
.item {
grid-column-start: 1;
grid-column-end: 3;
}
//一个简易的定义方式
.item {
grid-column: 1 / 3;
}
//引用父级定义的名称
.item {
grid-column-start: col-start 2;
}
定义item的对齐
沿着行justify-self，沿着列align-self
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
// 简写
place-self: align-self justify-self
}
定义网格线之间的距离
使用grid-column-gap / grid-row-gap定义行列间的距离，如果grid-row-gap没有定义，会被设置为等同于grid-column-gap
.grid {
grid-column-gap: 10px;
grid-row-gap: 15px;
//简写
grid-gap: 10px 15px;
}
定义网格行对齐 justify-items
这个东西是沿着行inline的对齐
.grid {
justify-items: start | end | center | stretch(填满单元格宽度，默认)
}
定义网格列对齐 align-items
沿着列block对齐
align-items: start | end | center | stretch;
一个简写
place-item是上述两个的简写
.grid {
place-items: <align-items> <justify-items> | 行 列
}
网格合计大小小于网格容器大小，设置网格容器内网格的对齐方式 听起来。。。不容易理解
用justify-content来定义
- start 左对齐
- end 右对齐
- center 水平居中对齐
- stretch 调整网格item宽度，允许充满整个容器宽度
- space-around 每个item间放一个均匀的容器，左右两端放置一般
- space-between 每个item放一个均匀容器，左右不放
- space-evenly 全部都放均匀的容器，包括左右
.grid {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
有了左右，辣当然有上下了
用align-content定义，这个和上面的一样，就是把左换成顶，右换成底，左右变成上下
.grid {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
当然也有简写了。。。
.grid {
place-content: <align-content> <justify-content> | 左右 上下
}
使用grid-template-areas定义模板 P.s.这个东西看起来很复杂= =我觉得用前面的东西就OK了
通过引用grid-area指定的网格区域定义模板，(.)表示一个空单元格，语法视作可视化网格结构。
子类grid-area指定名称，父层grid-area-name指定grid-area网格区域名称，none不定义网格区域。
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.grid {
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
//look here，可视化
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer"
}
自动放置算法 grid-auto-flow
Mmmm真的常用吗，其中dense是告诉算法出现较小网格时，填充较早的空缺。。。不过可能会混乱。
.grid {
grid-auto-flow: row | column | row dense | column dense
}
统一简写 高大上
grid: grid-template-rows, grid-template-columns, grid-teplate-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow;
哎哟，反正就按照下面的代码块来弄
.grid {
grid: 100px 300px / 3fr 1fr;
//等同于
grid-template'-rows: 100px 300px;
grid-template-columns: 3fr 1fr;
grid: auto-flow / 200px 1fr;
//等同于
grid-auto-flow:row;
grid-template-columns: 200px 1fr;
}
...我真的写不下去了...
网格动画
有5个可应用动画的网格属性 grid-gap, grid-row-gap, grid-column-gap
grid-template-columns, grid-template-rows
可以用长度、百分比、calc
网友评论