Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > grid容器和项目属性详解--PHP线上班十期1230
Blogger Information
Blog 25
fans 1
comment 1
visits 20682
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容器和项目属性详解--PHP线上班十期1230
高的PHP十期培训学习笔记
Original
648 people have browsed it

grid容器和项目属性详解

首先写一段HTML结构代码用于显示grid属性的展示，便于更直观的理解样式代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>grid容器和项目属性练习</title>
  6. </head>
  7. <body>
  8. <div class="container">
  9.     <div class="item">1</div>
  10.     <div class="item">2</div>
  11.     <div class="item">3</div>
  12.     <div class="item">4</div>
  13.     <div class="item">5</div>
  14.     <div class="item">6</div>
  15.     <div class="item">7</div>
  16.     <div class="item">8</div>
  17.     <div class="item">9</div>
  18. </div>
  19. </body>
  20. </html>

Grid容器的属性

先设置一个基本样式,将container转为grid容器并设定宽度

  1.     <style>
  2.         /*除body*/
  3.         * :not(body) {
  4.             outline: 1px dashed red;
  5.         }
  6.         /*设置容器的大小和字体大小*/
  7.         .container {
  8.             width: 600px;
  9.             font-size: 2rem;
  10.         }
  11.         /*转为grid*/
  12.         .container {
  13.            display: grid;
  14.         }
  15.     </style>

创建显式网格轨道

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

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

  1. .container {
  2.             grid-template-columns: repeat(3,1fr);
  3.             grid-template-rows: repeat(3,1fr);
  4.         }

grid-template-columns: repeat(3,1fr); 属性值的意思为重复3次后面的数值（fr是单位）

另一种写法为直接给属性值：grid-template-columns: 100px 150px 80px;

  • 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.       ;
    7.       }

名称可以是数字，也可以是单词等字符

创建隐式网格轨道

什么是隐式网格轨道轨道
隐式网格轨道是在一个grid容器中的项目数量超出创建的网格数量后，浏览器自动创建的网格用于放多出来的项目，多出来的网格就叫隐式网格轨道

  • grid-auto-flow: 网格中项目的流动方/排列方向(默认先行后列)
  1. .container {
  2.             /*grid-auto-flow: row;*/
  3.             grid-auto-flow: column;
  4.         }

grid-auto-flow: row;排列效果

grid-auto-flow: column;排列效果

  • grid-auto-columns: 隐式网格的列宽

    1. .container {
    2.           grid-auto-columns: 120px;
    3.       }

  • grid-auto-rows: 隐式网格的行高

    1. .container {
    2.           height: 300px;
    3.           grid-auto-rows: 60px;
    4.       }

    这个属性在设置时必须有剩余空间供分配，没有的话不生效

创建轨道间距

  • grid-column-gap | grid-row-gap | grid-gap | gap: 行/列间隙
  1.  .container {
  2.             grid-gap: 10px 20px;
  3.         }

推荐使用grid-gap:写法，属性值为：水平间距 垂直间距；单一值的话为共用；

所有项目在网络容器中的对齐方式

  • justify-contens: 设置所有项目在网格容器中的水平对齐方式
  1. .container {
  2.             /*justify-content: start;*/
  3.             /*justify-content: end;*/
  4.             justify-content: center;
  6.         }

  • justify-contens:的属性值： start 左/开始 end 右/结束 center 居中
  • align-content: 设置所有项目在网格容器中的垂直对齐方式
  1. .container {
  2.             /*align-content: start;*/
  3.             /*align-content: end;*/
  4.             align-content: center;
  7.         }

  • align-contens:的属性值： start 左/开始 end 右/结束 center 居中

  • place-content: justify-content和align-content的属性简写

    1. .container {
    2.           place-content: center end;
    3.       }

  • align-contens:的属性值：水平值 垂直值；只有一个值时共用

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

  • justify-items: 设置所有项目在单元格内的水平对齐方式

    1. .container {
    2.           justify-items: end;
    3.       }

  • justify-items:三个属性值 ：start 左/开始 end 右/结束 center 居中

  • align-items: 设置所有项目在单元格内的垂直对齐方式

    1. .container {
    2.           align-items: end;
    3.       }

  • align-items:三个属性值 ：start 左/开始 end 右/结束 center 居中

  • place-items: justify-items和align-items的属性简写

  1. .container {
  2.             place-items: center start;
  3.         }

  • place-items:的属性值：垂直值 水平值 ；只有一个值时共用

Grid项目属性的讲解

将项目放置到单元格中

  • grid-column-start: 起始列编号
  • grid-column-end: 终止列编号
  • grid-column: 上面二属性缩写
  1. .container > div:first-of-type{
  2.             background-color: lightblue;
  3.             grid-column: 1 / span 2;
  4.         }

  • grid-row-start: 起始行编号
  • grid-row-end: 终止行编号
  • grid-row: 上面二属性编写
  1. .container > div:first-of-type{
  2.             background-color: lightblue;
  3.             grid-row: 1 / span 2;
  4.         }

将项目放置到网格区域中

  • grid-area: top/left/bottom/right: 将项目按逆时针顺序放置
    1. .container > div:first-of-type{
    2.           background-color: lightblue;
    3.           grid-area: 2 / 2 / 3 / 4;
    4.       }

也可直接指定跨越的列数grid-area: 2 / 2 / 3 / span 2;

  • grid-area: area-name: 将项目放置到已命名的网格区域中 
  1. /*将第三个单元格放到第5个单元格的位置*/
  2.         .container > div:nth-of-type(3) {
  3.             grid-area: e;
  4.             background-color: lightblue;
  5.         }

项目在单元格中的对齐方式

  • justify-self: 设置项目在单元格中的水平对齐方式

    1. .container > div:nth-of-type(3) {
    2.           justify-self: center;
    3.       }

  • justify-self:三个属性值 ：start 左/开始 end 右/结束 center 居中

  • align-self: 设置项目在单元格中的垂直对齐方式

    1. .container > div:nth-of-type(3) {
    2.           align-self: end;
    3.       }

  • align-self:三个属性值 ：start 左/开始 end 右/结束 center 居中

  • place-self: justify-self和align-self的属性简写
  1. .container > div:nth-of-type(3) {
  2.             place-self: end start;
  3.         }

  • place-self: 属性值 ： 垂直 水平

手写grid容器及项目的属性

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