网格布局

• 以前使用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