简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > grid属性，实例演示
Blogger Information
Blog 64
fans 2
comment 1
visits 46824
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属性，实例演示
Y的博客
Original
658 people have browsed it

网格容器/网格项目/网格轨道/轨道间距

  • 网格容器:由若干个矩形网格单元构成
  • 网格项目：网格容器中的子元素，必须放在网格单元中
  • 网格单元：有单元格和网格区域两种表现形式
  • 网格轨道：由多个网格单元构成，根据方向有行轨和列轨
  • 轨道间距：容器中轨道之间的间距，有行轨间距和列轨间距 

  1.       .container {
  2.             /* grid子元素默认是块元素 */
  3.             border: solid 1px #000;
  4.             padding: 0.5em;
  5.             display: grid;
  6.             /* 设置为两行三列的布局 */
  7.             /* 设置列宽为10em */
  8.             grid-template-columns: 10em 10em 10em;
  9.             /* 设置行高为5em */
  10.             grid-template-rows:5em 5em;
  11.             /* 设置轨道间距 gap:第一个值时行间距 第二个值时列间距*/
  12.             gap:1em 0.5em;
  13.         }
  15.         /* 网格项目：网格容器中的子元素，必须放在网格单元中 */
  16.         .container>.item {
  17.            /* 默认生成一列N行的子元素 */
  18.            border: solid 1px #000;
  19.            background-color:lightcyan;
  20.            padding: 0.5em;
  21.         }

设置单元格尺寸的新单位：fr

  1.         .container {
  2.             /* grid子元素默认是块元素 */
  3.             border: solid 1px #000;
  4.             padding: 0.5em;
  5.             display: grid;
  6.             /* 轨道列宽 */
  7.             grid-template-columns: 10em 10em 10em;
  8.             /* 设置轨道宽度时可以使用一个新的单位: fr (fraction),类似flex中的伸缩因子 */
  9.             grid-template-columns: auto auto auto;
  10.             /* 1. fr 与 auto 之间的区别 */
  11.             /* 需求: 中间一列的宽度是二边的二倍 */
  12.             /* 此时 auto 完全失灵 */
  13.             grid-template-columns: 1fr 2fr 1fr;
  15.             /* 2. fr 与 % 的区别 */
  16.             /* 需求: 中间一列是左右的三倍 */
  17.             /* grid-template-columns: 1fr 3fr 1fr; */
  18.             /* grid-template-columns: 20% 60% 20%; */
  19.             /* % 与 fr 可以共存,计算方式,总宽度减去百分比的宽度,将剩下的全部分给fr  */
  20.             grid-template-columns: 20% 1fr 20%;
  22.             /* auto, fr, % 都是相对单位,都可以触发自动计算机制,尽可能不要同时出现 */
  24.             /* 3. fr 与其它单位混合, 如 em, px  */
  25.             /* px是固定的,em是固定,计算时要减去这些固定值,将剩下的空间在fr之间分配 */
  26.             /* 总宽度 - 8em - 200px,将剩下的空间在第2列与第3列之间分配 */
  27.             grid-template-columns: 8em 1fr 2fr 200px;
  29.             /* 4. fr 尽可能不要与 auto 同时使用 */
  30.             /* auto 与 px , em ,会自动计算 */
  31.             grid-template-columns: 30% auto 10em;
  32.             /* 与 auto 相邻的不是em,rem,%，而是fr  */
  33.             grid-template-columns: 1fr auto 1fr;
  35.             /* 设置行高为5em */
  36.             grid-template-rows:5em 5em;
  37.             /* 设置轨道间距 gap:第一个值时行间距 第二个值时列间距*/
  38.             gap:1em 0.5em;
  39.         }
  41.         /* 网格项目：网格容器中的子元素，必须放在网格单元中 */
  42.         .container>.item {
  43.            /* 默认生成一列N行的子元素 */
  44.            border: solid 1px #000;
  45.            background-color:lightcyan;
  46.            padding: 0.5em;
  47.         }

设置网格单元尺寸的常用函数: repeat(),minmax()

  1.  .container {
  2.             /* grid子元素默认是块元素 */
  3.             border: solid 1px #000;
  4.             padding: 0.5em;
  5.             display: grid;
  6.             /* 轨道列宽 */
  7.             /* grid-template-columns: 10em 10em 10em; */
  8.             /* 1. reapeat() */
  9.             grid-template-columns: repeat(3,10em);
  10.             /* 第二个参数可以是多个值 */
  11.             grid-template-columns: repeat(3,10em 2em);
  12.             grid-template-columns: repeat(3,1fr);
  13.             grid-template-columns: repeat(3,1fr 2fr);
  14.             /* 多个值的时候后面两个值是一组 */
  15.              /* 展开 */
  16.              grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
  17.              /* 混合使用 */
  18.             grid-template-columns: repeat(2, 1fr) 2fr;
  19.             /* 展开 */
  20.             grid-template-columns: 1fr 1fr 2fr;
  22.             /* 2. minmax() */
  23.             /* 中间列,最小宽度是20em,最大宽高是左右的2倍 */
  24.             grid-template-columns: 1fr minmax(20em,2fr) 1fr;
  25.             /* grid-template-columns: 1fr minmax(20em,1fr) ; */
  28.             /* 设置行高为5em */
  29.             grid-template-rows:5em 5em;
  30.             /* 设置轨道间距 gap:第一个值时行间距 第二个值时列间距*/
  31.             gap:1em 0.5em;
  32.         }
  34.         /* 网格项目：网格容器中的子元素，必须放在网格单元中 */
  35.         .container>.item {
  36.            /* 默认生成一列N行的子元素 */
  37.            border: solid 1px #000;
  38.            background-color:lightcyan;
  39.            padding: 0.5em;
  40.         }

网格单元的排列方式与隐式轨道

  1. 排列方式：grid-auto-flow
  2. 行优先：grid-auto-rows
  3. 列优先：grid-auto-columns 
  1. .container {
  2.             border: solid 1px #000;
  3.             padding: 0.5em;
  4.             display: grid;
  5.             /* 轨道列宽 */
  6.             /* grid-template-columns: 10em 10em 10em; */
  7.             /* 1. reapeat() */
  8.             grid-template-columns: repeat(3,1fr);
  9.             /* 设置行高为5em */
  10.             grid-template-rows:repeat(2,5em);
  11.             /* 设置轨道间距 gap:第一个值时行间距 第二个值时列间距*/
  12.             gap:1em 0.5em;
  14.             /* 此时声明的网格单元数量已经不够存入所有的网格项目了 */
  15.             /* 多出的三个项目会自动放入到自动生成的网格空间中了 */
  17.             /* 原来声明的网格单元叫: 显式轨道
  18.             新项目显示的轨道称为: 隐式轨道 */
  19.             /* 默认按先行后列的顺序的排列，行优先 */
  20.             grid-auto-flow: row;
  21.             /* 自动生成隐式轨道的高度是自动的 */
  22.             /* 行优先时，要设置隐式轨道的行高 */
  23.             grid-auto-rows: 5em;
  24.             /* 列优先 */
  25.             /* grid-auto-flow: column; */
  26.             /* 列优先时要设置轨道的列宽 */
  27.             /* grid-auto-columns: 1fr; */
  28.         }
  29.         /* 网格项目：网格容器中的子元素，必须放在网格单元中 */
  30.         .container>.item {
  31.            /* 默认生成一列N行的子元素 */
  32.            border: solid 1px #000;
  33.            background-color:lightcyan;
  34.            padding: 0.5em;
  35.         }

自定义项目在容器中显示的位置

  1. /* 编号从左上角开始（1,1），并递增 */
  2.             /* grid-area: 设置任何一个项目所在网格单元的区域; */
  3.             /* grid-area: 行起始标号/列起始编号/行结束编号/列结束标号 */
  4.         .container .item:nth-of-type(5){
  5.             background-color: burlywood;
  6.             grid-area: 2/2/3/3;
  7.             /* 将他放在第一个网格单元中 */
  8.             grid-area: 1/1/2/2;
  9.             /* 默认项目跨越一行一列 */
  10.             grid-area: 1/1;
  11.             /* 跨越两行三列 */
  12.             grid-area: 1/1/3/4;
  13.             /* 通常只关心几行几列，并不关心结束标号  */
  14.             grid-area: 1 / 1 / span 2 / span 3;
  15.         }
  16.         .container .item:first-of-type {
  17.             background-color: lightgreen;
  18.             grid-area:3/1/span 1 /span 3 ;
  19.             /* 因为 3  / 1 是当前位置,所以可省 */
  20.             grid-area: span 1/span 3;
  21.             /* 默认是跨一行一列,跨越列的时候前面不能省，用auto表示 */
  22.             grid-area: auto/span 3;
  23.         }

总结：

序号 属性 描述
1 grid-template-columns 设置几列和列宽
2 grid-template-rows 设置几行和行高
3 gap 设置轨道间距
4 fr 设置单元格尺寸单位
5 repeat(),minmax() 设置网格单元尺寸的常用函数
6 grid-auto-flow 网格单元排列方式
7 grid-auto-rows 行优先
8 grid-auto-columns 列优先
9 grid-area 自定义项目在容器中显示的位置
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！