search

博客列表 >CSS学习之Grid布局属性总结--PHP培训十期线上班

CSS学习之Grid布局属性总结--PHP培训十期线上班

宋明杰
宋明杰原创
2020年01月01日 10:07:14806浏览

Grid属性总结：

与 Flex 相同，Grid 也分为容器与项目两个概念；在一个 html 标签中添加样式：display：grid，即构建了一个 Grid 的容器，容器里面的元素即为 Grid 项目。

HTML结构说明

以下所有例子均基于或扩展于下面的HTML结构：

  1. <body>
  2.  <div class="container">
  3.      <div class="itme">
  4.          <span>中国.四川</span>
  5.      </div>
  6.      <div class="itme">
  7.          <span>中国.四川</span>
  8.      </div>
  9.      <div class="itme">
  10.         <span>中国.四川</span>
  11.     </div>
  12.      <div class="itme">
  13.          <span>中国.四川</span>
  14.      </div>
  15.      <div class="itme">
  16.          <span>中国.四川</span>
  17.      </div>
  18.      <div class="itme">
  19.          <span>中国.四川</span>
  20.      </div>
  21.      <div class="itme">
  22.          <span>中国.四川</span>
  23.      </div>
  24.      <div class="itme">
  25.          <span>中国.四川</span>
  26.      </div>
  27.      <div class="itme">
  28.          <span>中国.四川</span>
  29.      </div>
  31.  </div>
  33. </body>

Grid容器属性：

1，创建显示网格轨道：

  • grid-template-colums: 基于列,定义网络线的名称与与轨道大小
  • grid-template-rows: 基于行,定义网络线的名称与与轨道大小

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

    grid-template: 可快速命名网格区域并设定网格大小(配合gird项目的grid-area属性)

    1. <style>
    2.       .container{
    3.           margin: auto;
    4.           border: 1px solid red;
    5.           width: 600px;
    6.           height: 300px;
    7.           background: #fffdef;
    8.           display: grid;
    9.           /*1，直接有px像素定义行列的宽窄和数量*/
    10.           /*grid-template-columns: 200px 200px 200px;*/
    11.           /*grid-template-rows: 100px 100px 100px;*/
    13.           /*2，用repeat函数快速定义行列的宽窄和数量*/
    14.           /*grid-template-columns: repeat(3,140px);*/
    15.           /*grid-template-rows: repeat(3,60px);*/
    17.           /*3，使用命名的方式定义行列的宽窄和数量*/
    18.           grid-template: '1 2 3' 29%
    19.                          '4 5 6' auto
    20.                          '7 8 9' 20%
    21.                        /1fr 1fr 1fr;
    22.       }
    23.   </style>

运行实例截图：

2，行列间距属性：

grid-column-gap | grid-row-gap | grid-gap | gap: 行/列间距：

  1.   <style>
  2.         .container{
  3.             margin: auto;
  4.             border: 1px solid red;
  5.             width: 600px;
  6.             height: 300px;
  7.             background: #fffdef;
  8.             display: grid;
  9.             grid-template-columns: repeat(3,200px);
  10.             grid-template-rows: repeat(3,100px);
  11.             grid-gap:10px;
  12.             /*place-content: space-between;*/
  13.             place-items: center;
  14.         }
  16.     </style>

运行实例截图：

3,grid-auto-flow: 项目在网格中项目的排列方向(默认先行后列)

grid-auto-flow：column

grid-auto-flow：row

4,所有项目在容器中的对齐方式

  • justify-contens: 设置所有项目在网格容器中的水平对齐方式
  • align-content: 设置所有项目在网格容器中的垂直对齐方式
  • place-content: justify-content和align-content的简写

place-content:start:

place-content:center:

place-content:end:

place-content:space-between:

place-content:space-evenly:

place-content:space-around:

5,所有项目在单元格中的对齐方式

  • justify-items: 设置所有项目在单元格内的水平对齐方式
  • align-items: 设置所有项目在单元格内的垂直对齐方式
  • place-items: justify-items和align-items的简写

    place-items:start:

    place-items:center:

    place-items:end:

Grid项目属性：

1， 将项目放置到单元格中

  • grid-column-start: 起始列编号
  • grid-column-end: 终止列编号

  • grid-column: 上面二属性缩写

  • grid-row-start: 起始行编号

  • grid-row-end: 终止行编号
  • grid-row: 上面二属性编写

将内容放入指定编号内：

  • grid-area: top/left/bottom/right: 将项目按逆时针顺序放置

    1.   <style>
    2.       .container{
    3.           margin: auto;
    4.           border: 1px solid red;
    5.           width: 600px;
    6.           height: 300px;
    7.           background: #fffdef;
    8.           display: grid;
    9.           grid-template-columns: repeat(3,190px);
    10.           grid-template-rows: repeat(3,90px);
    11.           grid-gap:10px;
    12.           place-content: space-around;
    13.           place-items: center;
    14.           /*grid-auto-flow: row;*/
    15.       }
    16.       .container>.itme:nth-of-type(3) span{
    17.           background: red;
    18.       }
    19.       .container>.itme:nth-of-type(3){
    20.           grid-area: 2/2/4/4;
    21.       }
    23.   </style>

代码运行截图：

将项目放入指定名称内：

  1.   <style>
  2.         .container{
  3.             margin: auto;
  4.             border: 1px solid red;
  5.             width: 600px;
  6.             height: 300px;
  7.             background: #fffdef;
  8.             display: grid;
  9.             /*grid-template-columns: repeat(3,190px);*/
  10.             /*grid-template-rows: repeat(3,90px);*/
  11.             grid-template: 'A1 A2 A3' 1fr
  12.                            'B1 B2 B2' 2fr
  13.                             'C1 C2 C3' 1fr
  14.                            /1fr 2fr 1fr;
  15.             grid-gap:10px;
  16.             place-content: space-around;
  17.             place-items: center;
  18.             /*grid-auto-flow: row;*/
  19.         }
  20.         .container>.itme:nth-of-type(3) span{
  21.             background: red;
  22.         }
  23.         .container>.itme:nth-of-type(3){
  24.             /*grid-area: 2/2/4/4;*/
  25.             grid-area:B2;
  26.         }
  28.     </style>

运行实例截图：

手抄代码截图：

上一条：HTML制作静态商品购物车结算页面下一条：12月30日larave 增删改查
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多