search

博客列表 >grid属性，实例演示

grid属性，实例演示

Y的博客
Y的博客原创
2020年12月30日 11:25:48659浏览

网格容器/网格项目/网格轨道/轨道间距

  • 网格容器:由若干个矩形网格单元构成
  • 网格项目：网格容器中的子元素，必须放在网格单元中
  • 网格单元：有单元格和网格区域两种表现形式
  • 网格轨道：由多个网格单元构成，根据方向有行轨和列轨
  • 轨道间距：容器中轨道之间的间距，有行轨间距和列轨间距 

  1.       .container {
  2.             /* grid子元素默认是块元素 */
  3.             border: solid 1px #000;
  4.             padding: 0.5em;
  5.             display: grid;
  6.             /* 设置为两行三列的布局 */
  7.             /* 设置列宽为10em */
  8.             grid-template-columns: 10em 10em 10em;
  9.             /* 设置行高为5em */
  10.             grid-template-rows:5em 5em;
  11.             /* 设置轨道间距 gap:第一个值时行间距 第二个值时列间距*/
  12.             gap:1em 0.5em;
  13.         }
  15.         /* 网格项目：网格容器中的子元素，必须放在网格单元中 */
  16.         .container>.item {
  17.            /* 默认生成一列N行的子元素 */
  18.            border: solid 1px #000;
  19.            background-color:lightcyan;
  20.            padding: 0.5em;
  21.         }

设置单元格尺寸的新单位：fr

  1.         .container {
  2.             /* grid子元素默认是块元素 */
  3.             border: solid 1px #000;
  4.             padding: 0.5em;
  5.             display: grid;
  6.             /* 轨道列宽 */
  7.             grid-template-columns: 10em 10em 10em;
  8.             /* 设置轨道宽度时可以使用一个新的单位: fr (fraction),类似flex中的伸缩因子 */
  9.             grid-template-columns: auto auto auto;
  10.             /* 1. fr 与 auto 之间的区别 */
  11.             /* 需求: 中间一列的宽度是二边的二倍 */
  12.             /* 此时 auto 完全失灵 */
  13.             grid-template-columns: 1fr 2fr 1fr;
  15.             /* 2. fr 与 % 的区别 */
  16.             /* 需求: 中间一列是左右的三倍 */
  17.             /* grid-template-columns: 1fr 3fr 1fr; */
  18.             /* grid-template-columns: 20% 60% 20%; */
  19.             /* % 与 fr 可以共存,计算方式,总宽度减去百分比的宽度,将剩下的全部分给fr  */
  20.             grid-template-columns: 20% 1fr 20%;
  22.             /* auto, fr, % 都是相对单位,都可以触发自动计算机制,尽可能不要同时出现 */
  24.             /* 3. fr 与其它单位混合, 如 em, px  */
  25.             /* px是固定的,em是固定,计算时要减去这些固定值,将剩下的空间在fr之间分配 */
  26.             /* 总宽度 - 8em - 200px,将剩下的空间在第2列与第3列之间分配 */
  27.             grid-template-columns: 8em 1fr 2fr 200px;
  29.             /* 4. fr 尽可能不要与 auto 同时使用 */
  30.             /* auto 与 px , em ,会自动计算 */
  31.             grid-template-columns: 30% auto 10em;
  32.             /* 与 auto 相邻的不是em,rem,%，而是fr  */
  33.             grid-template-columns: 1fr auto 1fr;
  35.             /* 设置行高为5em */
  36.             grid-template-rows:5em 5em;
  37.             /* 设置轨道间距 gap:第一个值时行间距 第二个值时列间距*/
  38.             gap:1em 0.5em;
  39.         }
  41.         /* 网格项目：网格容器中的子元素，必须放在网格单元中 */
  42.         .container>.item {
  43.            /* 默认生成一列N行的子元素 */
  44.            border: solid 1px #000;
  45.            background-color:lightcyan;
  46.            padding: 0.5em;
  47.         }

设置网格单元尺寸的常用函数: repeat(),minmax()

  1.  .container {
  2.             /* grid子元素默认是块元素 */
  3.             border: solid 1px #000;
  4.             padding: 0.5em;
  5.             display: grid;
  6.             /* 轨道列宽 */
  7.             /* grid-template-columns: 10em 10em 10em; */
  8.             /* 1. reapeat() */
  9.             grid-template-columns: repeat(3,10em);
  10.             /* 第二个参数可以是多个值 */
  11.             grid-template-columns: repeat(3,10em 2em);
  12.             grid-template-columns: repeat(3,1fr);
  13.             grid-template-columns: repeat(3,1fr 2fr);
  14.             /* 多个值的时候后面两个值是一组 */
  15.              /* 展开 */
  16.              grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
  17.              /* 混合使用 */
  18.             grid-template-columns: repeat(2, 1fr) 2fr;
  19.             /* 展开 */
  20.             grid-template-columns: 1fr 1fr 2fr;
  22.             /* 2. minmax() */
  23.             /* 中间列,最小宽度是20em,最大宽高是左右的2倍 */
  24.             grid-template-columns: 1fr minmax(20em,2fr) 1fr;
  25.             /* grid-template-columns: 1fr minmax(20em,1fr) ; */
  28.             /* 设置行高为5em */
  29.             grid-template-rows:5em 5em;
  30.             /* 设置轨道间距 gap:第一个值时行间距 第二个值时列间距*/
  31.             gap:1em 0.5em;
  32.         }
  34.         /* 网格项目：网格容器中的子元素，必须放在网格单元中 */
  35.         .container>.item {
  36.            /* 默认生成一列N行的子元素 */
  37.            border: solid 1px #000;
  38.            background-color:lightcyan;
  39.            padding: 0.5em;
  40.         }

网格单元的排列方式与隐式轨道

  1. 排列方式：grid-auto-flow
  2. 行优先：grid-auto-rows
  3. 列优先：grid-auto-columns 
  1. .container {
  2.             border: solid 1px #000;
  3.             padding: 0.5em;
  4.             display: grid;
  5.             /* 轨道列宽 */
  6.             /* grid-template-columns: 10em 10em 10em; */
  7.             /* 1. reapeat() */
  8.             grid-template-columns: repeat(3,1fr);
  9.             /* 设置行高为5em */
  10.             grid-template-rows:repeat(2,5em);
  11.             /* 设置轨道间距 gap:第一个值时行间距 第二个值时列间距*/
  12.             gap:1em 0.5em;
  14.             /* 此时声明的网格单元数量已经不够存入所有的网格项目了 */
  15.             /* 多出的三个项目会自动放入到自动生成的网格空间中了 */
  17.             /* 原来声明的网格单元叫: 显式轨道
  18.             新项目显示的轨道称为: 隐式轨道 */
  19.             /* 默认按先行后列的顺序的排列，行优先 */
  20.             grid-auto-flow: row;
  21.             /* 自动生成隐式轨道的高度是自动的 */
  22.             /* 行优先时，要设置隐式轨道的行高 */
  23.             grid-auto-rows: 5em;
  24.             /* 列优先 */
  25.             /* grid-auto-flow: column; */
  26.             /* 列优先时要设置轨道的列宽 */
  27.             /* grid-auto-columns: 1fr; */
  28.         }
  29.         /* 网格项目：网格容器中的子元素，必须放在网格单元中 */
  30.         .container>.item {
  31.            /* 默认生成一列N行的子元素 */
  32.            border: solid 1px #000;
  33.            background-color:lightcyan;
  34.            padding: 0.5em;
  35.         }

自定义项目在容器中显示的位置

  1. /* 编号从左上角开始（1,1），并递增 */
  2.             /* grid-area: 设置任何一个项目所在网格单元的区域; */
  3.             /* grid-area: 行起始标号/列起始编号/行结束编号/列结束标号 */
  4.         .container .item:nth-of-type(5){
  5.             background-color: burlywood;
  6.             grid-area: 2/2/3/3;
  7.             /* 将他放在第一个网格单元中 */
  8.             grid-area: 1/1/2/2;
  9.             /* 默认项目跨越一行一列 */
  10.             grid-area: 1/1;
  11.             /* 跨越两行三列 */
  12.             grid-area: 1/1/3/4;
  13.             /* 通常只关心几行几列，并不关心结束标号  */
  14.             grid-area: 1 / 1 / span 2 / span 3;
  15.         }
  16.         .container .item:first-of-type {
  17.             background-color: lightgreen;
  18.             grid-area:3/1/span 1 /span 3 ;
  19.             /* 因为 3  / 1 是当前位置,所以可省 */
  20.             grid-area: span 1/span 3;
  21.             /* 默认是跨一行一列,跨越列的时候前面不能省，用auto表示 */
  22.             grid-area: auto/span 3;
  23.         }

总结：

序号 属性 描述
1 grid-template-columns 设置几列和列宽
2 grid-template-rows 设置几行和行高
3 gap 设置轨道间距
4 fr 设置单元格尺寸单位
5 repeat(),minmax() 设置网格单元尺寸的常用函数
6 grid-auto-flow 网格单元排列方式
7 grid-auto-rows 行优先
8 grid-auto-columns 列优先
9 grid-area 自定义项目在容器中显示的位置
上一条：Js常用数据类型及变量与常量的声明与赋值下一条：弹性盒子布局——flex
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多