简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 《grid属性常用属性示例》20201224
Blogger Information
Blog 26
fans 1
comment 1
visits 19462
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属性常用属性示例》20201224
杨凡的博客
Original
673 people have browsed it

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。
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！