Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid常用属性
Blogger Information
Blog 19
fans 0
comment 0
visits 10140
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
Original
936 people have browsed it
属性 作用
grid 转为网格容器
grid-area 将项目放入指定的网格单元中
grid-template-columns/rows 生成行列的轨道
grid-auto-flow 行与列的排列规则
grid-auto-row/column 隐式网格的行/列的大小
gap 行列间隙
place-content 所有项目在“容器”中的对齐方式
place-items 所有项目在“网格单元”中的对齐方式
place-self 某个项目在“网格单元”中的对齐方式

1. display: grid; /*转为网格容器

2.grid-template-columns:生成三列


grid-template-rows 生成三行
.

3.grid-area：直接定义网格区域:将项目放入指定的网格单元中 并使用sapn标签实现指定跨行和列


使用sapn标签实现指定跨行和列

4.grid-auto-flow:改为行的方向顺序排列


改变列的方向顺序排列

5.grid-auto-rows: 浏览器自动设置高度并把新生成的子元素放入到自动生成的网格

7.gap: 行列之间的间隙：如果两个值的参数是相同即可简写为一个！

8. place-content: 所有项目在“容器”中的对齐方式分为垂直方向和水平方向


place-content:剩余空间还可以在项目之间进行分配分为两个值垂直方向space-between space-around/水平方向space-between space-between

9.place-items: 设置项目在“网格单元”中的对齐方式

10.place-self指定设置项目中某个单元格对齐方式

  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.   </head>
  9.   <style>
  10.     * {
  11.       /*初始化格式*/
  12.       margin: 0;
  13.       padding: 0;
  14.       box-sizing: border-box;
  15.     }
  16.     .container {
  17.       width: 30em;
  18.       height: 30em;
  19.       width: 40em;
  20.       height: 50em;
  21.       color: red;
  22.       text-align: center;
  23.       font-weight: bolder;
  24.       background-color: rgb(100, 237, 191);
  25.       display: grid; /*转为网格容器*/
  26.       grid-template-columns: 10em 10em 10em; /*生成三列轨道*/
  27.       grid-template-rows: 10em 10em 10em; /* 生成三行轨道*/
  28.       grid-area: 3 / span 2;
  29.       /* 垂直方向剧中 */
  30.       place-content: start start;
  31.       place-content: center end;
  32.       /* 水平方向剧中 */
  33.       place-content: center center;
  34.       place-content: center;
  36.       /* 所有剩余空间还可以在项目之间进行分配  */
  37.       place-content: space-between space-around;
  38.       place-content: space-between space-between;
  39.       place-content: space-between;
  40.       /* place-items 设置项目在单元格中对齐 */
  41.       place-items: start start;
  42.       place-items: end end; /*右下对齐*/
  43.       place-items: center; /*居中对齐*/
  44.       /* grid-auto-flow: 默认是行的排列顺序 */
  45.       /*改为列的方向顺序排列*/
  46.       /* grid-auto-flow: column;  */
  48.       /* grid-auto-rows: 浏览器自动设置高度并把新生成的子元素放入到自动生成的网格 */
  49.       grid-auto-rows: 10em;
  51.       /* gap: 行列之间的间隙 */
  52.       /* gap: 5px 5px;
  53.       gap: 5px; 如果两个值的参数是相同即可简写为一个 */
  54.     }
  55.     /*把项目放到单元格*/
  56.     .container > .item {
  57.       width: 6em;
  58.       height: 6em;
  59.       background-color: lightseagreen;
  60.       /* grid-area: 直接定义网格区域:将项目放入指定的网格单元中 */
  61.       /*  grid-area:3/1; grid-area:3/1;(3=三行/1=第一列)*/
  62.       /* grid-area: 行开始 / 列开始 / 行结束 / 列结束 */
  63.       /* 案列2. */
  64.       /* grid-area: 1 / 2 / span 2 / span 2; */
  65.     }
  67.     .container > .item:nth-of-type(8) {
  68.       background-color: rgb(241, 16, 65);
  69.       /* 设置某个项目的对齐方式 */
  70.       place-self: end end;
  71.       place-self: end;
  72.     }
  73.   </style>
  74.   <body>
  75.     <div class="container">
  76.       <div class="item">1</div>
  77.       <div class="item">2</div>
  78.       <div class="item">3</div>
  79.       <div class="item">4</div>
  80.       <div class="item">5</div>
  81.       <div class="item">6</div>
  82.       <div class="item">7</div>
  83.       <div class="item">8</div>
  84.       <div class="item">9</div>
  85.     </div>
  86.   </body>
  87. </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