search

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

grid属性实例演示

手机用户1576673622
手机用户1576673622原创
2021年01月26日 19:40:57610浏览

基本概念

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

网格单元

  1.         .container {
  2.             border: 1px solid #000;
  3.            padding: 0.5em;
  4.            /* grid子元素默认为块元素 flex中子元素默认为行内元素 */
  5.             display: grid;
  7.             /* 列宽 */
  8.             grid-template-columns: 5em 5em;
  9.             /* 行高 */
  10.             grid-template-rows: 8em;
  12.             /* 轨道间距： 水平 垂直 */
  13.             gap: 0.5em 1em;
  14.             /* 两个值一样可简写成一个 */
  15.         }
  17.         .container>.item {
  18.             border: 1px solid #000;
  19.             background-color: rgb(218, 133, 133);
  20.             padding: 0.5em;
  21.         }

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

  1.         .container {
  2.             border: 1px solid #000;
  3.            padding: 0.5em;
  4.            /* grid子元素默认为块元素 flex中子元素默认为行内元素 */
  5.             display: grid;
  7.             /* 列宽 */
  8.             grid-template-columns: 5em 5em 5em;
  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.             /* 轨道间距 水平 垂直 */
  36.             gap: 0.5em 1em;
  37.             /* 两个值一样可简写成一个 */
  38.         }

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

  • repeat（）
  1.             /* 1. reapeat() */
  2.             grid-template-columns: repeat(3, 10em);
  3.             /* 第二个参数可以是多个值 */
  4.             grid-template-columns: repeat(3, 10em 2em);
  5.             grid-template-columns: repeat(3, 1fr);
  6.             grid-template-columns: repeat(3, 1fr 2fr);
  7.             /* 展开 */
  8.             grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
  9.             /* 混合使用 */
  10.             grid-template-columns: repeat(2, 1fr) 2fr;
  11.             /* 展开 */
  12.             grid-template-columns: 1fr 1fr 2fr;

  • minmax（）

    1.       /* 2. minmax() */
    2.       /* 中间列,最小宽度是20em,最大宽高是左右的2倍 */
    3.       grid-template-columns: 1fr minmax(20em, 2fr) 1fr;
    4.       grid-template-columns: 20em minmax(20em, 1fr);
    5.       /* grid-template-columns: 20em minmax(20em, auto); */

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

  1. 排列方式 : grid-auto-flow
  2. 隐式轨道的行高: grid-auto-rows

  3. 隐式轨道的列宽: grid-auto-columns 

    1.      /* 原来声明的网格单元叫: 显式轨道 */
    2.      /* 多出来的新项目显示的轨道称为: 隐式轨道 */
    4.      /* 此时,默认项目在容器中按: 先行后列的顺序排列,“行优先” */
    5.      grid-auto-flow: row;
    6.      /* 自动生成的隐式轨道的高度是自动的 */
    7.      /* 行优先时要设置隐式轨道的行高 */
    8.      grid-auto-rows: 5em;
    10.      /* 列优先 */
    11.      /* grid-auto-flow: column; */
    12.      /* 列优时要设置的隐式轨道的列宽 */
    13.      /* grid-auto-columns: 1fr; */

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

    1.      /* 编号从左上角开始(1,1),并递增 */
    3.      /* grid-area: 设置任何一个项目所在的网格单元的区域 */
    4.      /* grid-area: 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号  */
    6.      /* 以第5个项目来举例 */
    7.      .container>.item:nth-of-type(5) {
    8.          background-color: lightyellow;
    10.          grid-area: 2 / 2 / 3 / 3;
    11.          /* 将它放入到第一个网格单元中 */
    12.          grid-area: 1 / 1 / 2 / 2;
    13.          /* 默认项目是跨越一行一列 */
    14.          grid-area: 1 / 1;
    15.          /* 但是,如果要跨越1行以上或1列以上,就不能省 */
    16.          /* 例如要跨2行3列 */
    17.          grid-area: 1 / 1 / 3 / 4;
    18.          /* 通常只关心跨几行或几列,并不关心结束的编号 */
    19.          grid-area: 1 / 1 / span 2 / span 3;
    20.      }
    22.      /* 选中第一个项目 */
    23.      .container>.item:first-of-type {
    24.          background-color: lightgreen;
    25.          grid-area: 3 / 1 / span 1 / span 3;
    26.          /* 因为 3  / 1 是当前位置,所以可省 */
    27.          grid-area: span 1 / span 3;
    28.          /* 之前说过,默认是跨一行一列 */
    29.          /* grid-area: span 3; */
    30.          grid-area: auto / span 3;
    31.      }

总结:
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 四值: 最完整的语法

总结

序号 代码 描述
1 grid-template-columns 设置轨道的列宽
2 grid-template-rows 设置轨道的列高
3 gap 设置轨道间距
4 fr 设置单元格尺寸单位
5 repeat(),minmax() 设置网格单元尺寸的常用函数
6 grid-auto-flow 网格单元排列方式
7 grid-auto-rows、grid-auto-columns 设置隐式轨道的行高、列宽
8 grid-area 自定义项目在容器的显示位置
上一条：PHP基础：数据类型的演示下一条：PHP环境搭建与基础语法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多