Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid布局基本术语解释和grid属性演示
Blogger Information
Blog 11
fans 0
comment 0
visits 8192
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布局基本术语解释和grid属性演示
YwQ
Original
1149 people have browsed it

1028作业

grid布局的基本术语解释:

  1. 网格容器：整个使用grid布局的区域都叫做网格容器。
  2. 网格项目：网格容器内部采用网格定位的子元素。
  3. 网格单元：网格项目位于的一个单元格或者多个单元格，都叫网格单元。
  4. 网络区域：网格容器生成的全部模块/区域。
  5. 网格轨道：网格生成的行与列。
    1. grid-template-columns,生成网格列
    2. grid-template-rows,生成网格行
  6. 轨道间隙：网格轨道中的间隙。由gap设置，gap：10em{水平，行与行之间间隙} 5em{垂直，列与列之间间隙}，或者gap：10em{每个网格单元之间的间隙}

    实例演示今晚学到的全部grid新属性, 必须有图

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>grid布局</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             display: grid;
  17.             /* 转为网格容器 */
  18.             grid-template-columns: 10em 10em;
  19.             /* 生成两列的轨道，每列宽度10em */
  20.             grid-template-rows: 10em 10em;
  21.             /* 生成两行的轨道，每列行高10em */
  22.             /* gap: 1em 2em; */
  23.             /* 生成网格之间的间隙，水平（行间隙）为1em，垂直（列间隙）为2em */
  24.             gap: 1em;
  25.             /* 生成网格之间的间隙，水平（行间隙）和垂直（列间隙）都为1em */
  27.             /* 前面生成的网格模板是两行两列的共计四个，下面的网格项目第五个就是：
  28.             隐式网格单元 */
  29.             grid-auto-flow: row;
  30.             /* 默认项目排列方向 ,行优先*/
  31.             /* 行优先时候可以设置行高，不能设置列宽 */
  32.             /* 行高设置方式： */
  33.             grid-auto-rows: auto;
  34.             grid-auto-rows: min-content;
  35.             /* 浏览器自动设置高度 */
  36.             grid-auto-rows: 10em;
  37.             /* 给行高设置一个10em的固定高度 */
  38.             grid-auto-rows: minmax(10em, auto);
  39.             /* 设置一个最小10em，最大自适应的行高 */
  41.             grid-auto-flow: column;
  42.             /* 将项目排列方向改成列 */
  43.             /* 列优先时候可以设置列宽，不能设置行高 */
  44.             /* 列宽设置方式： */
  45.             grid-auto-columns: auto;
  46.             grid-auto-columns: min-content;
  47.             /* 浏览器自动设置宽度 */
  48.             grid-auto-columns: 10em;
  49.             /* 给行高设置一个10em的固定宽度 */
  50.             /* grid-auto-columns: minmax(10em, auto); */
  51.             /* 设置一个最小10em，最大自适应的列宽 */
  52.         }
  54.         .container>.item {
  55.             width: 3em;
  56.             height: 3em;
  57.             background-color: aquamarine;
  59.         }
  60.     </style>
  61. </head>
  63. <body>
  64.     <!-- container：网格容器 -->
  65.     <div class="container">
  66.         <!-- item：网格项目 -->
  67.         <div class="item">1</div>
  68.         <div class="item">2</div>
  69.         <div class="item">3</div>
  70.         <div class="item">4</div>
  71.         <div class="item">5</div>
  72.     </div>
  73. </body>
  75. </html>

图片案例：

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