作业内容:将今晚提及的全部grid属性,进行实例演示,并记住讲过每一个属性值的意义,写出总结
grid是由网格容器/网格项目/网格轨道/轨道间距组成
- 网格容器: 由若干个矩形网格单元构成
网格项目: 网格容器的子元素,必须放在网络单元中
网格单元: 有"单元格"和"网格区域"二种表现形式
网格轨道: 由多个网格单元组成,根据排列方向有"行轨"和"列轨"之分
轨道间距: 容器中轨道之间的间距,有"行轨间距","列轨间距" */
注 flex中子元素默认为inline元素,grid中子元素默认为block元素
当 % 与 fr 可以共存,计算方式,总宽度减去百分比的宽度,将剩下的全部分给fr
当auto, fr, % 都是相对单位,都可以触发自动计算机制,尽可能不要同时出现
fr为动态值
代码
div{
display: grid;
/* 1. 设置轨道的列宽 */
grid-template-columns: 10em 10em 10em;
/* 设置轨道宽度时可以使用一个新的单位: fr (fraction),类似flex中的伸缩因子 */
grid-template-columns: 1fr 1fr 1fr;
/* 2. 设置轨道的行高 */
grid-template-rows: 5em 5em;
/* 3. 设置轨道的间距 */
/* gap: 水平 垂直 */
gap: 1em 2em;
/* 如果水平和垂直间距一样可缩写gap: 1em */
gap: 1em;
}
/* 设置网格单元尺寸的常用函数: repeat(),minmax() */
div{
/* 1. reapeat() 设置列宽*/
/* 第一个参数为列数 第二个参数为列的宽度 */
grid-template-columns: repeat(3, 10em);
/* 第二个参数可以是多个值 */
grid-template-columns: repeat(3, 10em 2em);
/* 单个单元格固定其他自适应 fr为动态值*/
grid-template-columns: repeat(3, 1fr 2fr);
/* 2. minmax() 最小宽度*/
/* 表示中间列的最小宽度是20em,最大宽高位左右宽度的2倍 */
grid-template-columns: 1fr minmax(20em, 2fr) 1fr;
/* 表示为第一固定 第二位最宽度20em最大宽度为第一个的1倍 */
grid-template-columns: 20em minmax(20em, 1fr);
}
/* 网格项目: 网格容器中的"子元素" , 与flex是一样的 */
div>span{
background-color: chocolate;
border: #000 1px solid;
}
2.网格单元的排列方式与隐式轨道
排列方式 : grid-auto-flow
隐式轨道的行高: grid-auto-rows
隐式轨道的列宽: grid-auto-columns
当声明的网格单元数量已经不够存入所有的网格项目时 */
此时,多出的项目会自动放入到自动生成的网格空间中 */
这时,原来声明的网格单元叫: 显式轨道;新项目显示的轨道称为: 隐式轨道
代码
div{
/* 此时,默认项目在容器中按: 先行后列的顺序排列,“行优先” */
grid-auto-flow: row;
/* 自动生成的隐式轨道的高度是自动的 */
/* 行优先时要设置隐式轨道的行高 */
grid-auto-rows: 5em;
/* 列优先 */
grid-auto-flow: column;
/* 列优时要设置的隐式轨道的列宽 */
grid-auto-columns: 1fr;
}
3.使用grid-area:自定义项目在容器的显示位置
grid-area: 参数数量不同,意义不同
注 1. 值中只有span
1.1 单值: 跨的行数
1.2 双值: 跨的行与列数,如果只想设置列数,就必须设置行数(auto)
2. 值中有span和编号
2.1 双值: 没有span,默认跨1行1列, grid-area: 2 / 3 ;
2.2 三值: 省了列结束编号或跨的数量,此时前面的值可使用auto
2.3 四值: 最完整的语法
代码
/* 使用grid-area:自定义项目在容器的显示位置 */
div{grid-template-columns: 1fr 1fr 1fr;grid-auto-flow: row;}
/* 编号从左上角开始(1,1),并递增 */
/* grid-area: 设置任何一个项目所在的网格单元的区域 */
/* grid-area: 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号 */
div>span:nth-of-type(2){
background-color: cornsilk;
/* 原始位置 */
grid-area: 1/1/2/2;
/* 跨行 */
grid-area: -2/1/3/4;
/* 跨列 */
grid-area: 1/2/4/4;
/* span站位关键字 */
grid-area: 1/1 / span 2;
grid-area: 参数数量不同,意义不同
}
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>grid网格容器/网格项目/网格轨道/轨道间距</title>
<style>
/* 1. 网格容器: 由若干个矩形网格单元构成 */
/* 2. 网格项目: 网格容器的子元素,必须放在网络单元中 */
/* 3. 网格单元: 有"单元格"和"网格区域"二种表现形式*/
/* 4. 网格轨道: 由多个网格单元组成,根据排列方向有"行轨"和"列轨"之分 */
/* 5. 轨道间距: 容器中轨道之间的间距,有"行轨间距","列轨间距" */
/*注 flex中子元素默认为inline元素,grid中子元素默认为block元素
当 % 与 fr 可以共存,计算方式,总宽度减去百分比的宽度,将剩下的全部分给fr
当auto, fr, % 都是相对单位,都可以触发自动计算机制,尽可能不要同时出现
fr为动态值
*/
div{
display: grid;
/* 1. 设置轨道的列宽 */
grid-template-columns: 10em 10em 10em;
/* 设置轨道宽度时可以使用一个新的单位: fr (fraction),类似flex中的伸缩因子 */
grid-template-columns: 1fr 1fr 1fr;
/* 2. 设置轨道的行高 */
grid-template-rows: 5em 5em;
/* 3. 设置轨道的间距 */
/* gap: 水平 垂直 */
gap: 1em 2em;
/* 如果水平和垂直间距一样可缩写gap: 1em */
gap: 1em;
}
/* 设置网格单元尺寸的常用函数: repeat(),minmax() */
div{
/* 1. reapeat() 设置列宽*/
/* 第一个参数为列数 第二个参数为列的宽度 */
grid-template-columns: repeat(3, 10em);
/* 第二个参数可以是多个值 */
grid-template-columns: repeat(3, 10em 2em);
/* 单个单元格固定其他自适应 fr为动态值*/
grid-template-columns: repeat(3, 1fr 2fr);
/* 2. minmax() 最小宽度*/
/* 表示中间列的最小宽度是20em,最大宽高位左右宽度的2倍 */
grid-template-columns: 1fr minmax(20em, 2fr) 1fr;
/* 表示为第一固定 第二位最宽度20em最大宽度为第一个的1倍 */
grid-template-columns: 20em minmax(20em, 1fr);
}
/* 网格项目: 网格容器中的"子元素" , 与flex是一样的 */
div>span{
background-color: chocolate;
border: #000 1px solid;
}
/* 网格单元的排列方式与隐式轨道 */
/*
1. 排列方式 : grid-auto-flow
2. 隐式轨道的行高: grid-auto-rows
3. 隐式轨道的列宽: grid-auto-columns
*/
/* 当声明的网格单元数量已经不够存入所有的网格项目时 */
/* 此时,多出的项目会自动放入到自动生成的网格空间中 */
/* 这时,原来声明的网格单元叫: 显式轨道;新项目显示的轨道称为: 隐式轨道 */
div{
/* 此时,默认项目在容器中按: 先行后列的顺序排列,“行优先” */
grid-auto-flow: row;
/* 自动生成的隐式轨道的高度是自动的 */
/* 行优先时要设置隐式轨道的行高 */
grid-auto-rows: 5em;
/* 列优先 */
grid-auto-flow: column;
/* 列优时要设置的隐式轨道的列宽 */
grid-auto-columns: 1fr;
}
/* 使用grid-area:自定义项目在容器的显示位置 */
div{grid-template-columns: 1fr 1fr 1fr;grid-auto-flow: row;}
/* 编号从左上角开始(1,1),并递增 */
/* grid-area: 设置任何一个项目所在的网格单元的区域 */
/* grid-area: 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号 */
div>span:nth-of-type(2){
background-color: cornsilk;
/* 原始位置 */
grid-area: 1/1/2/2;
/* 跨行 */
grid-area: -2/1/3/4;
/* 跨列 */
grid-area: 1/2/4/4;
/* span站位关键字 */
grid-area: 1/1 / span 2;
grid-area: 参数数量不同,意义不同
/*注 1. 值中只有span
1.1 单值: 跨的行数
1.2 双值: 跨的行与列数,如果只想设置列数,就必须设置行数(auto)
2. 值中有span和编号
2.1 双值: 没有span,默认跨1行1列, grid-area: 2 / 3 ;
2.2 三值: 省了列结束编号或跨的数量,此时前面的值可使用auto
2.3 四值: 最完整的语法 */
}
</style>
</head>
<body>
<div>
<span class="span">1</span>
<span class="span">2</span>
<span class="span">3</span>
<span class="span">4</span>
<span class="span">5</span>
<span class="span">6</span>
<span class="span">7</span>
<span class="span">8</span>
<span class="span">9</span>
</div>
</body>
</html>
grid实例布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>grid布局</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
body{
display: grid;
grid-template-columns: 20em 1fr 20em;
grid-template-rows: 8vh calc(84vh - 32px) 8vh;
gap: 1em;
}
body>*{
/* border: #000 1px solid; */
}
header,footer{
background-color: cornsilk;
grid-area: span 1 / span 3;
}
main{
background-color: cyan;
grid-area: 2/2;
}
</style>
</head>
<body>
<header>header</header>
<main>主体</main>
<aside>左侧栏</aside>
<aside>右侧栏</aside>
<footer>footer</footer>
</body>
</html>
实例图片