Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid常用属性与实例演示
Blogger Information
Blog 43
fans 4
comment 0
visits 19373
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
grid常用属性与实例演示
汇享科技
Original
392 people have browsed it

grid常用属性与实例演示

  • 创建一个网格布局常用的三部

    1. 定义一个grid网格容器使用display:grid;
    2. 画网格（划分网格单元）grid-template-rows创建行/grid-template-columns创建列
    3. 将项目放置到对应的网格单元中 grid-row定义行开始行结束grid-column定义列开始列结束

  • 常用属性如下：

属性名 描述
容器属性display:grid 创建一个grid容器
容器属性grid-template-columns/rows 划分网格 生成几行几列使用 生成的是显示网格
项目属性grid-column/row 将某一个项目放置在哪个单元格area是简写
项目属性grid-area 定义网格区域可以理解为合并单元格值：行开始/列开始/行结束/列结束
容器属性grid-auto-flow 定义项目的排列顺序默认是行优先
容器属性grid-auto-row/column 定义隐式网格的行列的大小隐式网格就是不在用户默认定义的显示网格内
容器属性gap 定义每个行列之间的间隙大小类似于外边距
容器属性place-content 定义项目在容器中的对齐方式
容器属性place-items 定义项目在网格单元中的对齐方式
项目属性place-self 定义某个项目在网格单元中的对齐方式

实例演示

  1. grid-column/row使用方式

l5kfgfh5.png

2.grid-auto-flow使用方式

l5kfogfl.png

3.grid-auto-rows/columns使用方式

l5kft20t.png

4.grid-area使用方式

l5kgc97j.png

5.gap使用方式

l5kgf3i8.png

6.place-content使用方式

属性：值1是垂直方式 值2是水平方式 start end center space-between space-around

l5kgilk5.png

7.place-items使用方式

l5kgwk0w.png

如果需要设置所有项目在容器中为居中 并且在网格单元中也是居中可以这样

l5kgz3c1.png

8.place-self的使用方式

l5kh30as.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>grid布局</title>
  8.     <style>
  9.       .content {
  10.         width: 40em;
  11.         height: 40em;
  12.         background-color: lightcoral;
  13.         /*创建容器*/
  14.         display: grid;
  15.         /*定义一个四行四列宽高度为8em的网格*/
  16.         grid-template-columns: repeat(4, 8em);
  17.         grid-template-rows: repeat(4, 8em);
  18.         /*更换排列方式默认是row*/
  19.         /* grid-auto-flow: column; */
  20.         /* grid-auto-rows: 8em;
  21.         grid-auto-columns: 8em; */
  22.         /*垂直方式 水平方式*/
  23.         /* 注意必须要有剩余空间 */
  24.         place-content: center;
  25.         /* gap: 10px; */
  26.         place-items: center;
  27.       }
  28.       .itme,
  29.       .itme2,
  30.       .itme3,
  31.       .itme4,
  32.       .itme5 {
  33.         /*将单元格进行合并*/
  34.         width: 6em;
  35.         height: 6em;
  36.         /* grid-area: 2 / 2 / span 2 / span 2; */
  37.         /*将网格放在右下角位置*/
  38.         /*行开始/行结束*/
  39.         /* grid-row: 4/5;
  40.         grid-column: 4/5; */
  41.         /* 简写如下 */
  42.         /*行开始/列开始/行结束/列结束*/
  43.         /* grid-area: 4 / 4 / 5 / 5; */
  44.         background-color: aqua;
  45.       }
  46.       .itme5 {
  47.         place-self: end;
  48.       }
  49.       /* .itme5 {
  50.         /* grid-area: 3 /3;
  51.         grid-column: 2 / span 2;
  52.       } */
  53.     </style>
  54.   </head>
  55.   <body>
  56.     <div class="content">
  57.       <div class="itme">1</div>
  58.       <div class="itme2">2</div>
  59.       <div class="itme3">3</div>
  60.       <div class="itme4">4</div>
  61.       <div class="itme5">5</div>
  62.     </div>
  63.   </body>
  64. </html>
Correcting teacher：PHPzPHPz

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