grid布局笔记
grid布局概述
1.flex布局是⼀维布局，grid布局是⼆维布局。
2.flex考虑的是项⽬按⾏或列布局，grid布局需要同时考虑⾏和列。
grid-auto-flow:
row：告诉⾃动布局算法依次填充每⾏，根据需要添加新⾏
column：告诉⾃动布局算法依次填⼊每列，根据需要添加新列
dense：告诉⾃动布局算法在稍后出现较⼩的⽹格项时，尝试填充⽹格中较早的空缺
justify-items
沿着 ⾏轴线(row axis) 对齐 ⽹格项(grid items) 内的内容
align-items
沿着 列轴线(row axis) 对齐 ⽹格项(grid items) 内的内容
grid-auto-columns:
隐式⽹格的宽度
grid-auto-rows:
隐式⽹格的⾼度
⽹格项
⽹格项表⽰⽹格内部的直接⼦元素，不包括⼦元素的⼦元素。
常⽤属性：
grid-column-start: 列⽹格线 开始，
grid-column-end: 列⽹格线 结束
grid-column: start/end | start/span count
order: 与z-index的属性相同，表⽰层叠的位置。
grid-area: ⽹格名，在使⽤grid-template-areas时⽐较有⽤。
justify-self: 单个⽹格项在⾏轴线的对齐⽅式
align-self: 单个⽹格项在列轴线的对齐⽅式
grid-row: 1/ 5;
grid-column: 6/ 3;
或者
grid-row: 1/ span 4; // 横向第⼀个⽹格线开始，以下的4个⽹格轨道
grid-column: 3/span 3; // 竖向第三条⽹格线开始，以后的3个⽹格轨道
甚⾄简写成这样
grid-area: 1/3/ span 4/span 3;
flex布局对齐方式
grid布局要根据实际情况兼容的浏览器来定

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。