Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS学习之Grid布局属性总结--PHP培训十期线上班
Blogger Information
Blog 11
fans 0
comment 0
visits 8084
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS学习之Grid布局属性总结--PHP培训十期线上班
宋明杰
Original
807 people have browsed it

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>

运行实例截图：

手抄代码截图：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看得出, 你是多么的热爱你的家乡, 不得不说, 写得真好
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post