search

博客列表 >grid布局基本术语解释和grid属性演示

grid布局基本术语解释和grid属性演示

YwQ
YwQ原创
2020年10月29日 15:44:421112浏览

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>

图片案例：

上一条：BFC的作用及flex容器的四个属性下一条：web排版中的5G技术——grid布局实例演示新属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多