search

博客列表 >《grid属性常用属性示例》20201224

《grid属性常用属性示例》20201224

杨凡的博客
杨凡的博客原创
2020年12月25日 16:55:41678浏览

grid布局

列宽、行宽、间隙设置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>grid属性</title>
  7.     <style>
  8.         /* 网格容器 */
  9.         /* 网格容器中的每个项目默认都是块级元素 */
  10.         .container{
  11.             /* 什么支持网格布局元素 */
  12.             display: grid;
  13.             border: 1px solid #000;
  14.             padding: 0.5em;
  15.             /* 设置轨道的列宽 */
  16.             /* 设置3列2行的布局空间 */
  17.             /* 设置列方向的宽度默认auto； */
  18.             grid-template-columns: 10em 10em 10em;
  19.             /* 设置轨道的行高默认值auto */
  20.             grid-template-rows: 5em 5em;
  21.             /* 设置轨道的间隙 水平方向间隙 垂直方向间隙*/
  22.             gap: 1em 1em;
  23.         }
  24.         /* 网格项目：网格容器中的子元素 */
  25.         .container .item{
  26.             background-color: lightcyan;
  27.             border: 1px solid #000;
  28.             padding: 0.5em;
  29.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="container">
  36.         <span class="item">item1</span>
  37.         <span class="item">item2</span>
  38.         <span class="item">item3</span>
  39.         <span class="item">item4</span>
  40.         <span class="item">item5</span>
  41.         <span class="item">item6</span>
  42.     </div>
  43. </body>
  44. </html>

总结：

  1. display: grid;设置网格布局容器，网格容器中的每个项目默认都是块级元素
  2. grid-template-columns: 10em 10em 10em;设置三列布局，宽度为10em
  3. grid-template-rows: 5em 5em;设置为2行高度为5em
  4. gap: 1em 1em;水平方向间隙 垂直方向间隙 间隙为1em

fr单位使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>网格单元尺寸单位</title>
  7.     <style>
  8.         .container{
  9.             display: grid;
  10.             border: 1px solid #000;
  11.             padding: 0.5em;
  12.             grid-template-columns: 10em 10em 10em;
  13.             /* 设置轨道宽度时可以使用一个新的单位：fr，类似于flex的伸缩银子 */
  14.             /* grid-template-columns: auto auto auto; */
  15.             /* fr与auto区别 */
  16.             /* 百分比由于列间距的存在会超出范围 */
  17.             /* 百分比与fr共存时计算方式：总宽度减去百分比剩余的全部分给fr */
  18.             grid-template-columns: 1fr 2fr 1fr;
  19.             grid-template-rows: 5em 5em;
  20.             /* 设置轨道的间隙 水平方向间隙 垂直方向间隙*/
  21.             gap: 1em 1em;
  22.         }
  24.         .container .item{
  25.             background-color: lightcyan;
  26.             border: 1px solid #000;
  27.             padding: 0.5em;
  28.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div class="container">
  34.         <span class="item">item1</span>
  35.         <span class="item">item2</span>
  36.         <span class="item">item3</span>
  37.         <span class="item">item4</span>
  38.         <span class="item">item5</span>
  39.         <span class="item">item6</span>
  40.     </div>
  41. </body>
  42. </html>

代码总结：

  1. fr类似于百分比、auto的计算方式，更加灵活的缩放比例
  2. 存在间隙时使用百分比项目会超出范围，fr则不会
  3. 百分比与fr共存时计算方式：总宽度减去百分比剩余的全部分给fr
  4. fr尽量不要与auto，px，em等混合使用

repeat(),minmax()函数的使用

repeat()用法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>网格单元尺寸的常用函数</title>
  7.     <style>
  8.         .container{
  9.             display: grid;
  10.             border: 1px solid #000;
  11.             padding: 0.5em;
  12.             grid-template-columns: 10em 10em 10em;
  13.             /* repeat()第二个参数可以是多个值 */
  14.             grid-template-columns: repeat(3,10em);
  15.             grid-template-rows: 3em 3em;
  16.             /* 设置轨道的间隙 水平方向间隙 垂直方向间隙*/
  17.             gap: 1em 1em;
  18.         }
  20.         .container .item{
  21.             background-color: lightcyan;
  22.             border: 1px solid #000;
  23.             padding: 0.5em;
  24.         }
  25.         .container1{
  26.             display: grid;
  27.             border: 1px solid #000;
  28.             padding: 0.5em;
  29.             grid-template-columns: repeat(3,10em 2em);
  30.             grid-template-rows: 3em 3em;
  31.             gap: 1em 1em;
  32.         }
  33.         .container1 .item{
  34.             background-color: lightcyan;
  35.             border: 1px solid #000;
  36.             padding: 0.5em;
  37.         }
  38.         .container2{
  39.             display: grid;
  40.             border: 1px solid #000;
  41.             padding: 0.5em;
  42.             grid-template-columns: repeat(3,10em 2em 1em);
  43.             grid-template-rows: 3em 3em;
  44.             gap: 1em 1em;
  45.         }
  46.         .container2 .item{
  47.             background-color: lightcyan;
  48.             border: 1px solid #000;
  49.             padding: 0.5em;
  50.         }
  51.         .container3{
  52.             display: grid;
  53.             border: 1px solid #000;
  54.             padding: 0.5em;
  55.             grid-template-columns: repeat(3,10em) 2em;
  56.             grid-template-rows: 3em 3em;
  57.             gap: 1em 1em;
  58.         }
  59.         .container3 .item{
  60.             background-color: lightcyan;
  61.             border: 1px solid #000;
  62.             padding: 0.5em;
  63.         }
  64.     </style>
  65. </head>
  66. <body>
  67.     <div class="container">
  68.         <span class="item">item1</span>
  69.         <span class="item">item2</span>
  70.         <span class="item">item3</span>
  71.         <span class="item">item4</span>
  72.         <span class="item">item5</span>
  73.         <span class="item">item6</span>
  74.     </div>
  75.     <br>
  76.     <div class="container1">
  77.         <span class="item">item1</span>
  78.         <span class="item">item2</span>
  79.         <span class="item">item3</span>
  80.         <span class="item">item4</span>
  81.         <span class="item">item5</span>
  82.         <span class="item">item6</span>
  83.     </div>
  84.     <br>
  85.     <div class="container2">
  86.         <span class="item">item1</span>
  87.         <span class="item">item2</span>
  88.         <span class="item">item3</span>
  89.         <span class="item">item4</span>
  90.         <span class="item">item5</span>
  91.         <span class="item">item6</span>
  92.     </div>
  93.     <br>
  94.     <div class="container3">
  95.         <span class="item">item1</span>
  96.         <span class="item">item2</span>
  97.         <span class="item">item3</span>
  98.         <span class="item">item4</span>
  99.         <span class="item">item5</span>
  100.         <span class="item">item6</span>
  101.     </div>
  102. </body>
  103. </html>

代码总结：repeat()有多种写法

  1. grid-template-columns: repeat(3,10em);与grid-template-columns: 10em 10em 10em;效果一样
  2. grid-template-columns: repeat(3,10em 2em);与grid-template-columns: 10em 2em 10em 2em 10em 2em;效果一样
  3. grid-template-columns: repeat(3,10em 2em 1em);与grid-template-columns: 10em 2em 1em 10em 2em 1em;效果一样
  4. grid-template-columns: repeat(3,10em) 2em;与grid-template-columns: 10em 10em 10em 2em 10em 10em;效果一样
  5. repeat()可以理解为是简写或者组合写法的函数

minmax()用法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>网格单元尺寸的常用函数</title>
  7.     <style>
  8.         .container{
  9.             display: grid;
  10.             border: 1px solid #000;
  11.             padding: 0.5em;
  12.             grid-template-columns: 1fr minmax(10em,2fr) 1fr;
  13.             grid-template-rows: 3em 3em;
  14.             /* 设置轨道的间隙 水平方向间隙 垂直方向间隙*/
  15.             gap: 1em 1em;
  16.         }
  18.         .container .item{
  19.             background-color: lightcyan;
  20.             border: 1px solid #000;
  21.             padding: 0.5em;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="container">
  27.         <span class="item">item1</span>
  28.         <span class="item">item2</span>
  29.         <span class="item">item3</span>
  30.         <span class="item">item4</span>
  31.         <span class="item">item5</span>
  32.         <span class="item">item6</span>
  33.     </div>
  34. </body>
  35. </html>

代码总结：

  1. grid-template-columns: 1fr minmax(10em,2fr) 1fr;设置和中间区块最小值10em，其他值是两边区块的两倍
  2. 通过minmax()的应用，可以用它作为媒体查询来使用
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>自定义项目在容器的显示位置</title>
  7.     <style>
  8.         .container{
  9.             display: grid;
  10.             border: 1px solid #000;
  11.             padding: 0.5em;
  12.             grid-template-columns: repeat(3,1fr);
  13.             grid-template-rows: 5em 5em;
  14.             /* 设置轨道的间隙 水平方向间隙 垂直方向间隙*/
  15.             gap: 1em 1em;
  16.             grid-auto-rows: 5em;
  17.         }
  19.         .container .item{
  20.             background-color: lightcyan;
  21.             border: 1px solid #000;
  22.             padding: 0.5em;
  24.         }
  25.         .container>.item:nth-of-type(5){
  26.             background-color: red;
  27.             /* grid-area设置任何一个项目所在的网格单元的区域 */
  28.             /* grid-area：行起始编号/列起始编号/行结束编码/列结束编号 */
  29.             grid-area: 1/1/2/2;
  30.             /* 简写 如果跨越超过1行以上或者1列以上就不能简写 */
  31.             grid-area: 1/1;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="container">
  37.         <span class="item">item1</span>
  38.         <span class="item">item2</span>
  39.         <span class="item">item3</span>
  40.         <span class="item">item4</span>
  41.         <span class="item">item5</span>
  42.         <span class="item">item6</span>
  43.         <span class="item">item7</span>
  44.         <span class="item">item8</span>
  45.         <span class="item">item9</span>
  46.     </div>
  47. </body>
  48. </html>

文章总结：

指定一个容器使用网格布局

  • display: grid: 网格容器默认都是”块级元素”
  • display: inline-grid: 可以设置为”行内元素”

用于设置每一个单元格大小与显示方式

  • grid-template-columns: 定义每一列的列宽
  • grid-template-rows:: 定义每一行的行高

用于设置行与列排列方式

  • grid-auto-flow:row;: 行优先排列，设置隐式轨道行高grid-auto-rows
  • grid-auto-flow:column;: 列优先排列，设置隐式轨道列宽grid-auto-columns

用于设置行与列之间的间隙(行间距/列间距)

  • grid-columns-gap: 定义每一列的列宽
  • grid-row-gap:: 定义每一行的行高

用于自定义容器的显示位置

  • grid-area: 定义每一列的列宽，设置任何一个项目所在的网格单元的区域，grid-area：行起始编号/列起始编号/行结束编码/列结束编号
  • 数量不同意义不同
  • 值中有span，单值：跨的行数；双值：跨的行与列数，如果只想设置列数，就必须要设置行数（auto）
  • 值中有span和编号，双值：没有span，默认跨1行1列；三值：省了列结束编号或跨的数量，前面的值可使用auto。
上一条：1210（内联框架、布局元素、css初级）下一条：前段开发，图片
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多