grid的基本属性
<style>.con{display:grid;/* 变成网格布局 */grid-template-columns: 10em 10em 10em;/* 设置几列和列宽 */grid-template-rows: 5em 5em;/* 设置网格单元与网格单元之间的轨道间隙的宽度，第一个值是行，第二个是列*/gap: 0.5em 1em;/* 要是行和列的间隙一样，可以只写一个值 */gap: 0.5em;border: 1px solid;padding: 0.5em;}.con>span{padding: 0.5em;background-color: aqua;}</style><body><div class="con"><span class="item">item1</span><span class="item">item2</span><span class="item">item3</span><span class="item">item4</span><span class="item">item5</span><span class="item">item6</span></div></body>
grid的单位
<style>.con{display:grid;/* 中间是两边的两倍 */grid-template-columns: 1fr 2fr 1fr;/* 用百分比来实现中间是两边的两倍会超出网格，因为百分比不识别列间隙 */grid-template-columns: 20% 60% 20%;/* 百分比可以和fr共存，计算方式是总宽度减去百分比的宽度后剩下的都给fr，写几fr都行，因为没有其他fr做比较 */grid-template-columns: 20% 1fr 20%;/* 当只有auto和百分比是时候，auto会平均分配减去20%的值 */grid-template-columns: auto auto 20%;/* 当auto fr % 在一起的时候，auto是根据内容来定宽度，剩下的都给fr，不管是几fr */grid-template-columns: 20% 1fr 20%;grid-template-rows: 5em 5em;gap: 0.5em 1em;gap: 0.5em;border: 1px solid;padding: 0.5em;}.con>span{padding: 0.5em;background-color: aqua;}</style><body><div class="con"><span class="item">item1</span><span class="item">item2</span><span class="item">item3</span><span class="item">item4</span><span class="item">item5</span><span class="item">item6</span></div></body>
常用函数
<style>.con{display:grid;grid-template-columns: 10em 10em 10em;grid-template-rows: 5em 5em;/* 1.repeat()第一个值是重复的次数,第二个是重复的尺寸 */grid-template-columns: repeat(3, 10em);/* 第二个值可以写多个值，重复是重复一组 *//* grid-template-columns: repeat(3, 10em 2em); *//* 可以混合写 ，就是把括号里面的重复完后再现实后面的尺寸*//* grid-template-columns: repeat(2, 1fr) 2fr; *//* minmax设置最大最小值，前面是最小，后面是最大，下面这个意思就是中间最小是20em，最大是左右的2倍 */grid-template-columns: 1fr minmax(20em, 2fr) 1fr;gap: 0.5em 1em;border: 1px solid;padding: 0.5em;}.con>span{padding: 0.5em;background-color: aqua;}</style><body><div class="con"><span class="item">item1</span><span class="item">item2</span><span class="item">item3</span><span class="item">item4</span><span class="item">item5</span><span class="item">item6</span></div></body>
隐试轨道
没有设置过和定义过的轨道单元叫隐试轨道，设置和定义过的叫显式轨道
<style>.container {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: 5em 5em;border: 1px solid;padding: 0.5em;gap: 0.5rem;/* 新增加了三个容器，但是没有设置，它就会自动排列到自动生成的网格空间中 *//* 此时，多出的三个项目自动排列进去了 *//* 设置过的声明过的网格中的轨道叫显式轨道 *//* 没有声明过自动排列进去的叫隐式轨道 ，它的属性是自动的*//* 都是按照行优先排列的，一行排不下就会换行，叫行优先 *//* 设置排列优先级 ，默认是行排列*/grid-auto-flow: row;/* 设置隐试轨道的行高，当是行优先的时候管用 */grid-auto-rows: 5em;/* 列优先 */grid-auto-flow: column;/* 设置隐试轨道的列宽，当是列优先是时候管用 */grid-auto-columns: 1fr;}.container > .item {background-color: aqua;padding: 0.5rem;}</style><body><div class="container"><span class="item">item1</span><span class="item">item2</span><span class="item">item3</span><span class="item">item4</span><span class="item">item5</span><span class="item">item6</span><span class="item">item7</span><span class="item">item8</span><span class="item">item9</span></div></body>
更改项目显示位置
<style>.container {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: 5em 5em;border: 1px solid;padding: 0.5em;gap: 0.5rem;/* 设置任意一个项目所在的网格单元的区域 *//* grid-area: ;行起始编号/列起始编号/行结束编号/网格结束编号/ */grid-auto-rows: 5em;}.container > .item {background-color: aqua;padding: 0.5rem;}.container > .item:nth-of-type(5) {background-color: blue;/* 把第五个放到第一个 */grid-area: 1/1/2/2;/* 默认跨列一行一列，下面是简写 */grid-area: 1/1;/* 但是夸一行以上就不能简写了 */grid-area: 1/1/3/4;/* 通常自关心夸几行几列，并不关心结束的编号 *//* 下面的意思是，跨几行用span来表示，跨两行三列 */grid-area: 1/1 / span 2 / span 3;}.container > .item:first-of-type {background-color: brown;/* 通栏了，从起始位置跨上1行三列 */grid-area: 3/1 / span 1 / span 3;/* 因为是从起始位置开始的，可以省略 */grid-area: span 1 / span 3;/* 因为默认是跨一行，所以还可以简写 */grid-area: auto/ span 3;}</style><body><div class="container"><span class="item">item1</span><span class="item">item2</span><span class="item">item3</span><span class="item">item4</span><span class="item">item5</span><span class="item">item6</span><span class="item">item7</span><span class="item">item8</span><span class="item">item9</span></div></body>