Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS布局：grid布局基本知识
Blogger Information
Blog 145
fans 7
comment 7
visits 164520
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
CSS布局：grid布局基本知识
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
1332 people have browsed it

一、网格布局基本概念和术语

1、grid布局又称二维网格布局，主要用于快速布局页面和小区域
2、网格容器：我们通过在元素上声明display：grid，来创建一个网格容器。
3、网格容器中的所有直系子元素成为网格元素。
4、网格轨道：我们通过 grid-template-columns 和 grid-template-rows属性来定义网格中的行和列。这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。
5、网格单元和网格区域：网格单元有行列（行轨和列轨）交叉的形成的区域称为网格单元，网格单元是网格容器中的最小单元。网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形；
6、网格间距：在两个网格单元之间的 网格横向间距 或 网格纵向间距

二、网格布局的常见属性单位

1、网格容器设置网格的常见属性值；

属性名 属性值 作用
grid-template-rows px fr em rem % 设置行轨道高度
grid-template-columns px fr em rem % 设置列轨道的宽度
grid-template-areas 常见值;string，一组为一行；例如:grid-template-areas: ‘one one three’’one one six’; 命名网格单元名称
grid-gap row column常见单位值：px em rem 设置各个网格单元之间的（行轨间距和列轨间距）间距
place-items row column常见值：start center end 设置项目在网格单元中的对其方式
place-content row column常见值：start center end 设置网格单元在容器中的整体对其方式
grid-auto-flow 常见值：row、column 设置容器中项目单元的布局流向默认行优先
frid-auto-rows（columns） px fr em rem 设置隐式单元的行高和列宽

示意图：

2、容器中网格项目常见属性

属性 属性值 作用
grid-area 常见属性值：命名单元名称\行号和列号\跨列或者行span 设置项目在占据的网格单元的位置和网格区域
place-self start\center\end 设个某个项目在网格单元中排列方式

3、设置列宽和行高常见的值和函数：

1、fr:自适应容器的宽度和高度，可以通过设置不同值的fr来设置行于行之间（列与列值之间的比列宽度）
2、%：功能与fr类似，但无法自动去除行间距和列间距（容易撑破容器）
3、auto:自适应宽度和高度；但不能同时和fr\%都相邻
4、repeat(n,m)：重复设置指定的列宽或者行高,n重复的个数，m是设置的宽度或者高度，可以是多个值用空格区分开；
5、minmax(m,n):设置某行（某列）的最大最小值，处于两指中间自适用大小
6、auto-fit和auto-fill：自动计算出轨道宽度（高度）填充容器空间

4、grid-area:常见值以及简写用法

1、四值：row-start/column-start/row-end/colunm/end;
2、双值：设置起始行号和列号；起到定位单元格的作用
3、三值：与四值一致，知识省略了列的结束列号
4、单值：设置起始行号，其他全部默认值；auto,全部默认值
5、span混用：span n常用来代替结束行号和结束列号，跨n列（或者行）：

  • 双值：起始行号和列号，可以设置默认值；直接设置跨n列（行）即可；
  • 单值：设置跨n行，列默认

5、grid常见值的使用

1、代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>grid布局</title>
  6.         <style>
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.                 box-sizing: border-box;
  11.             }
  12.             :root{
  13.                 font-size: 10px;
  14.             }
  15.             .container{
  16.                 width: 60rem;
  17.                 height: 20rem;
  18.                 background-color: #D3D3D3;
  19.                 display: grid;
  20.                 grid-template-columns: repeat(3,10rem);
  21.                 grid-template-rows: repeat(3,4rem);
  22.                 /* 命名网格单元明称 */
  23.                 grid-template-areas: 'one one three'
  24.                                     'one one six';
  25.                 grid-gap: 0.5rem 1rem;
  26.                 /* 项目在网格单元格中的位置 start center end*/
  27.                 place-items: center center;
  28.                 /* 网格单元在容器中的分布 start center end*/
  29.                 place-content: center center;
  30.                 /* 设置网格单元在容器中的自动排列方向，默认为行优先 */
  31.                 grid-auto-flow: row;
  32.                 /* 当容器中的项目数量超过，网格中生成单元个数量时，会生成隐式的单元格，
  33.                 如果自动排列方向为行时，可以设置隐式行高 ；如果自动排列方向位列时可以设置隐式列宽*/
  34.                 /* grid-auto-columns: 10rem; */
  35.                 grid-auto-rows: 3rem;
  36.             }
  37.             .container > .item{
  38.                 width: 8rem;
  39.                 height: 3rem;
  40.                 background-color: #20B2AA;
  41.             }
  42.             .container > .item:first-of-type{
  43.                 grid-area: span 2 / span 1;
  44.                 height: 6rem;
  45.             }
  46.             .container > .item:nth-of-type(4){
  47.                 grid-area:one;
  48.             }
  49.             .container >.item:nth-of-type(2){
  50.                 /* 设置某个项目在网格单元中的排列方式 */
  51.                 place-self: start end;
  52.             }
  54.             .container1{
  55.                 width: 60rem;
  56.                 height: 20rem;
  57.                 background-color: #66CDAA;
  58.                 display: grid;
  59.                 grid-template-columns: repeat(3,14rem);
  60.                 /* grid-template-columns: repeat(auto-fit,minmax(9rem,1fr)); */
  61.                 grid-template-rows: repeat(2,5rem);
  62.                 grid-gap:1rem;
  63.                 place-content: center;
  65.             }
  66.             .container1 > .item{
  67.                 /* width:9rem; */
  68.                 height: 4rem;
  69.                 background-color: #A71D5D;
  70.             }
  72.             .container1 > .item:first-child{
  73.                 grid-area: 1 / 2 / 3;
  74.                 grid-area: 2;
  75.             }
  76.         </style>
  77.     </head>
  78.     <body>
  79.         <div class="container">
  80.             <div class="item">1</div>
  81.             <div class="item">2</div>
  82.             <div class="item">3</div>
  83.             <div class="item">4</div>
  84.             <div class="item">5</div>
  85.             <div class="item">6</div>
  86.             <div class="item">7</div>
  87.         </div>
  88.         <div class="container1">
  89.             <div class="item">1</div>
  90.             <div class="item">2</div>
  91.             <div class="item">3</div>
  92.             <div class="item">4</div>
  93.             <div class="item">5</div>
  94.             <div class="item">6</div>
  95.         </div>
  96.     </body>    
  97. </html>

2、运行效果

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