- 以前使用table布局,但是table布局需要把表格渲染完毕后才会渲染表格内部的内容,性能不好。
- 再到DIV+CSS浮动布局,再到position布局,再到inline,这几种都叫hack布局。
- flex布局,flex布局是一维的。
- 再到Grid布局,Grid是二维的
1.概念
- Grid Container:元素应用为display:grid;,所有网格项的父元素
- Grid Item:网格项
- Grid Line:网格线:组成网格项的分界线
- Grid Track:网格轨道,两个相邻的网格线之间为网格轨道
- Grid Cell:网格单元
- Grid Area:网格区域
网格容器属性
- display:grid | inline-grid | subgrid
当元素设置网格布局后,column、float、clear、vertical-aling无效
grid-template-columns/grid-template-rows
- grid-template-colums:规定有多少列
- grid-template-rows:规定有多少行
规定多少列就有多少列,如果规定的网格项不能装下所有内容就会增加网格的行。
定义网格线的名字
grid-template-columns: [frist] 10px [line2] 10px [line3] 10px [end]
grid-template-areas
grid-template-areas: "header header header header"
"main main . sideabr"
"footer footer footer footer";
gap:行/列间距
也可以认为是网格线的大小
不能设置不同的间隙
简写:
grid-gap:20px 30px; // row column
gap: 20px 30px;
以上两种写法都可以,如果只写一个值表示行列间隙一样
items对齐方式
items指的是网格项内容的对齐方式
justify-items: start | center | end | strech(默认) // 行
aling-items: start | center | end | strech(默认) // 列
简写
place-items: start end; // 列 行
content对齐方式
content指的是网格单元的对齐方式
justify-content: start(默认) | end | center | stretch | space-between | space-around | space-evenly
aling-content:start | stretch | end | center | space-betweem | space-around | space-evenly
简写
space-content: end end; // 列 行
CSS函数
repeat
repeat只能作用在grid-template-columns和grid-template-rows
repeat(number, value) // 重复次数,值
// 使用
grid-template-columns: repeat(1fr, 7)
fit-content
grid-template-columns: fit-content(200px)
// 表示如果网格项内容不足200px,按照网格项内的内容的宽度;如果大于200px就按照200px
minmax()取值范围
grid-template-columns: minmax(20px, 30px)
网格项属性
start-end
grid-column-start: 2; // 表示重第二列开始布局
grid-column-start: span 2; // 表示重原本的位置开始数,向后的第二个位置
grid-column-start: span line3; // 表示重名字为line3的开始
grid-column-start: -2; // 表示倒数第二个
如果给定的值大于最大的网格线数,会创建虚拟的网格;
网格项可以相互重叠。可以使用z-index控制它们的堆叠顺序
简写
grid-area
self
- justify-self
- aling-self