search

博客列表 >Grid容器和项目属性-PHP培训十期线上班 学号：510251 12月30日作业

Grid容器和项目属性-PHP培训十期线上班 学号：510251 12月30日作业

赵大叔
赵大叔原创
2020年01月02日 17:45:13604浏览

Grid容器和项目属性

一、Grid中的术语

  • 网格线(grid lines): 编号, 命名
  • 轨道(grid tracks): 二条线中间的空间, px, %, fr,auto
  • 单元格(grid cell): 四条网格线包起来的封闭空间
  • 网格区域(grid area): 多个单元格形成的矩形区域
  • 网格间距(grid gap): 行或列之间的间隙

二、创建网格容器

  • display: grid;将容器转为网格容器

三、画网格线

  • grid-template-colums: ; : 基于列,定义网络线的名与与轨道大小
  • grid-template-rows: ; : 基于行,定义网络线的名与与轨道大小
  • grid-column-gap | grid-row-gap | grid-gap | gap: 行/列间隙
  • grid-template-area: 命名网格区域(配合gird项目的grid-area属性)
  • grid-auto-columns: 隐式网格的列宽
  • grid-auto-rows: 隐式网格的行高
  • grid-auto-flow: 网格中项目的流动方/排列方向(默认先行后列)

四、Grid容器属性

  • grid-template-area: 命名网格区域(配合gird项目的grid-area属性)
    语法：

    1.   .container {
    2.           grid-template-areas:
    3.       'a b c'
    4.       'd e f'
    5.       'g h i';
    6.       }

    显示效果：

  • grid-auto-flow: 网格中项目的流动方/排列方向(默认先行后列)
    语法：
    1.   .container {
    2.           /*默认先行后列*/
    3.           /*grid-auto-flow: row;*/
    4.           /*设置先列后行*/
    5.           /*grid-auto-flow: column;*/
    6.       }
    显示效果：
  • justify-contens: 设置所有项目在网格中的水平对齐方式
    语法：
    1. .container {
    2.            /*默认，从左到右*/
    3.            /*justify-content: start;*/
    4.            /*从右到左*/
    5.            /*justify-content: end;*/
    6.            /*居中*/
    7.            /*justify-content: center;*/
    8.        }
    显示效果：
  • align-content: 设置所有项目在网格中的垂直对齐方式
    语法：
    1. .container {
    2.           /*默认，从上到下*/
    3.           /*align-content: start;*/
    4.           /*从下到上*/
    5.           /*align-content: end;*/
    6.           /*居中*/
    7.           /*align-content: center;*/
    8.       }

效果显示：

  • place-content: justify-content和align-content的属性简写，第1个值 表示垂直方向，第二个值表示水平方向。

语法：

  1. .container {
  2.             /*align-content和justify-content的简写*/
  3.             /*place-content: end center;*/
  4.         }

效果显示：

  • justify-items: 设置内容在单元格内的水平对齐方式
    语法：
    1. .container {
    2.           /*默认，从左到右*/
    3.           /*justify-items: start;*/
    4.           /*从右到左*/
    5.           /*justify-items: end;*/
    6.           /*居中*/
    7.           /*justify-items: center;*/
    8.       }

效果显示：

  • align-items: 设置内容在单元格内的垂直对齐方式
    语法：
    1. .container {
    2.           /*默认，从上到下*/
    3.           /*align-items: start;*/
    4.           /*从下到上*/
    5.           /*align-items: end;*/
    6.           /*居中*/
    7.           /*align-items: center;*/
    8.       }

效果：

  • place-items: justify-items和align-items的属性简写。第1个值 表示垂直方向，第二个值表示水平方向。
    语法：
    1. .container {
    2.           /*align-items和justify-items的简写*/
    3.           /*place-items: end center;*/
    4.       }
    效果：

五、Grid项目属性

  • grid-column-start/end | grid-row-start/end: 将项目放入行与列的网络起止线封闭的单元格中
    语法：

    1. .container > .item:first-of-type {
    2.           grid-column-start: 2;
    3.           grid-column-end: 3;
    4.           grid-row-start: 1;
    5.           grid-row-end: 2;
    6.       }

    效果：

  • grid-area: 将项目按顺时针顺序(top/left/bottom/right), 放入指定网格区域内
    语法：

    1. .container > .item:nth-of-type(5) {
    2.           grid-area: a;
    3.       }

    效果：

  • justify-self: 设置网格容器中某一个特定项目的水平对齐方式
    语法：

    1. /*水平*/
    2.           /*justify-self: start;*/
    3.           /*justify-self: end;*/
    4.           /*justify-self: center;*/

    效果：

  • align-self: 设置网格容器中某一个特定项目的垂直对齐方式
    语法：

    1. /*垂直*/
    2.           /*align-self: start;*/
    3.           align-self: end;
    4.           /*align-self: center;*/

    效果：

  • place-self: justify-self和align-self的属性简写
    语法：
    place-self: end center;
    效果：

六、手抄Grid容器和项目属性


上一条：1226_创建控制器 第41课下一条：CSS第一课
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多