Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 网格布局grid的9个属性
Blogger Information
Blog 48
fans 3
comment 1
visits 30348
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的9个属性
吴长清
Original
905 people have browsed it

网格布局grid的9个属性

序号 属性 描述
1 grid 创建grid容器,display:grid
2 grid-template-columns/rows 显示生成的网格单元，大多数情况下，让其自动生成
3 grid-area 将项目放入指定的网格单元中
4 grid-auto-flow 行与列的排列规则
5 grid-auto-row/column 隐式（自动生成的）网格单元行/列的大小（宽高）
6 gap 行/列间距
7 place-content 所有项目在“容器”中的对齐方式
8 place-items 所有项目在网格单元中的对齐方式
9 place-self 指定某个项目在网格单元中的对齐方式

1.grid

使用display:grid声明该容器是grid网格布局方式

  1. <div class="container">
  2.     <div class="item">这是项目子元素</div>
  3. </div>
  4. <style>
  5.     body .container {
  6.         background-color: antiquewhite;
  7.         width: 40em;
  8.         height: 40em;
  9.         /* 创建grid容器 */
  10.         display: grid;
  11.     }
  12. </style>

2.grid-template-columns/rows

序号 属性 描述
1 grid-template-columns 指定生成多少列和列宽
2 grid-template-rows 指定生成多少行和行高

例如：生成4行4列且宽高都是10em的写法如下：

列：grid-template-columns:10em 10em 10em 10em;
行：grid-template-rows:10em 10em 10em 10em;

可以用repeat来进行简写，如下:

列：grid-template-columns:repeat(4,10em);
行：grid-template-rows:(4,10em);

  1. <div class="container">
  2.     <div class="item">这是项目子元素</div>
  3. </div>
  4. <style>
  5.     body .container {
  6.         background-color: antiquewhite;
  7.         width: 40em;
  8.         height: 40em;
  9.         /* 创建grid容器 */
  10.         display: grid;
  11.         /* 生成4行4列且宽高都是10em网格容器 */
  12.         grid-template-columns: 10em 10em 10em 10em;
  13.         grid-template-rows: 10em 10em 10em 10em;
  14.         /* 简写 */
  15.         grid-template-columns: repeat(4, 10em);
  16.         grid-template-columns: repeat(4, 10em);
  17.     }
  18. </style>

3.grid-area

语法：grid-area:行开始/列开始/行结束/列结束,若不跨越网格单元，后面2个数值可以不写
等价于grid-column/row，但grid-area写发更为简化，推荐使用grid-area

例1:指定项目填充在第二行第二列的语法：grid-area:2/2

  1. <div class="container">
  2.     <div class="item">这是项目子元素</div>
  3. </div>
  4. <style>
  5.     body .container {
  6.         background-color: antiquewhite;
  7.         width: 40em;
  8.         height: 40em;
  9.         /* 创建grid容器 */
  10.         display: grid;
  11.         /* 生成4行4列且宽高都是10em网格容器 */
  12.         grid-template-columns: 10em 10em 10em 10em;
  13.         grid-template-rows: 10em 10em 10em 10em;
  14.         /* 简写 */
  15.         grid-template-columns: repeat(4, 10em);
  16.         grid-template-columns: repeat(4, 10em);
  17.     }
  18.     body .container .item {
  19.         background-color: aqua;
  20.         grid-area: 2/2;
  21.     }
  22. </style>

例2:指定项目填充在第二行第二列,且跨越两行三列的语法：grid-area:2/2/span 2/span 3

  1. <div class="container">
  2.     <div class="item">这是项目子元素</div>
  3. </div>
  4. <style>
  5.     body .container {
  6.         background-color: antiquewhite;
  7.         width: 40em;
  8.         height: 40em;
  9.         /* 创建grid容器 */
  10.         display: grid;
  11.         /* 生成4行4列且宽高都是10em网格容器 */
  12.         grid-template-columns: 10em 10em 10em 10em;
  13.         grid-template-rows: 10em 10em 10em 10em;
  14.         /* 简写 */
  15.         grid-template-columns: repeat(4, 10em);
  16.         grid-template-columns: repeat(4, 10em);
  17.     }
  18.     body .container .item {
  19.         background-color: aqua;
  20.         grid-area:2/2/span 2/span 3;
  21.     }
  22. </style>

4.grid-auto-flow

例1：行优先（水平排列），浏览器默认的，语法： grid-auto-flow:row 如下：

  1. <div class="container">
  2.    <div class="item">①</div>
  3.    <div class="item">②</div>
  4.    <div class="item">③</div>
  5.    <div class="item">④</div>
  6.    <div class="item">⑤</div>
  7.    <div class="item">⑥</div>
  8.    <div class="item">⑦</div>
  9.    <div class="item">⑧</div>
  10.    <div class="item">⑨</div>
  11.    <div class="item">⑩</div>
  12.    <div class="item">⑩①</div>
  13.    <div class="item">⑩②</div>
  14.    <div class="item">⑩③</div>
  15.    <div class="item">⑩④</div>
  16.    <div class="item">⑩⑤</div>
  17.    <div class="item">⑩⑥</div>
  18. </div>
  19. <style>
  20.     body .container {
  21.         background-color: antiquewhite;
  22.         width: 40em;
  23.         height: 40em;
  24.         /* 创建grid容器 */
  25.         display: grid;
  26.         /* 简写 */
  27.         grid-template-columns: repeat(4, 10em);
  28.         grid-template-columns: repeat(4, 10em);
  29.         /* 这个可以不写，因为默认的排序方式就是以行优先 */
  30.         grid-auto-flow:row;
  31.     }
  32.     body .container .item {
  33.         width: 100px;
  34.         height: 100px;
  35.         background-color: aqua;
  36.         margin: auto;
  37.         font-size: 22px;
  38.     }
  39. </style>

例2：列优先（垂直排列），修改关键代码即可 grid-auto-flow:column 效果如下：

5.grid-auto-rows/column

grid-auto-rows设置自动填充的行高
这里我只设置了2行3列，且容器中有9个项目，那么多出来的3个项目会自动填充，并且网格单元行高会顶满父容器，这时就可以通过grid-auto-rows:10em来设置多出来的3个项目的网格单元的行高，如下：
未设置grid-auto-rows属性之前：

  1. <div class="container">
  2.    <div class="item">①</div>
  3.    <div class="item">②</div>
  4.    <div class="item">③</div>
  5.    <div class="item">④</div>
  6.    <div class="item">⑤</div>
  7.    <div class="item">⑥</div>
  8.    <div class="item">⑦</div>
  9.    <div class="item">⑧</div>
  10.    <div class="item">⑨</div>
  11. </div>
  12. <style>
  13.     body .container {
  14.         background-color: antiquewhite;
  15.         width: 40em;
  16.         height: 40em;
  17.         /* 创建grid容器 */
  18.         display: grid;
  19.         /* 简写  设置3例2行的网格*/
  20.         grid-template-columns: repeat(3, 10em);
  21.         grid-template-rows: repeat(2, 10em);
  22.     }
  23.     body .container .item {
  24.         width: 100px;
  25.         height: 100px;
  26.         background-color: aqua;
  27.         margin: auto;
  28.         font-size: 22px;
  29.     }
  30. </style>

设置grid-auto-rows:15em属性之后,关键代码如下：

  1.     body .container {
  2.         background-color: antiquewhite;
  3.         width: 40em;
  4.         height: 40em;
  5.         /* 创建grid容器 */
  6.         display: grid;
  7.         /* 简写  设置3例2行的网格*/
  8.         grid-template-columns: repeat(3, 10em);
  9.         grid-template-rows: repeat(2, 10em);
  10.         /* 设置自动填充的网格单元的行高为15em */
  11.         grid-auto-rows:15em;
  12.     }

grid-auto-colum的使用方法差不多，就不做演示了

6.gap

gap:行间距/列间距，当行间距和列间距相同时，值设置一个值即可，如：grp:10px表示行和列的间距都为10px。
例：设置网格单元之间的行间距为10px，列间距为50px，语法：gap:10px 50px;,如下：

  1. <div class="container">
  2.    <div class="item">①</div>
  3.    <div class="item">②</div>
  4.    <div class="item">③</div>
  5.    <div class="item">④</div>
  6.    <div class="item">⑤</div>
  7.    <div class="item">⑥</div>
  8.    <div class="item">⑦</div>
  9.    <div class="item">⑧</div>
  10.    <div class="item">⑨</div>
  11. </div>
  12. <style>
  13.     body .container {
  14.         background-color: antiquewhite;
  15.         width: 40em;
  16.         height: 40em;
  17.         /* 创建grid容器 */
  18.         display: grid;
  19.         /* 简写  设置3例2行的网格*/
  20.         grid-template-columns: repeat(3, 10em);
  21.         grid-template-rows: repeat(2, 10em);
  22.         /* 设置网格单元之间的行间距为10px，列间距为50px */
  23.         gap:10px 50px;
  24.     }
  25.     body .container .item {
  26.         width: 100px;
  27.         height: 100px;
  28.         background-color: aqua;
  29.         margin: auto;
  30.         font-size: 22px;
  31.     }
  32. </style>

7.place-content

grid网格布局和flex弹性盒子中的属性place-content用法大致相同，place-content属性在flex只能控制一个方向排列（单值），而在grid中可以同时控制垂直和水平方向排列（双值）：第一个值控制垂直方向，第二值控制水平方向

序号 属性 描述
1 start 顶（左）对齐 剩余空间在项目的右侧（默认值）
2 end 底（右）对齐 剩余空间在项目的左侧
3 center 水平居中 剩余空间平均分配在项目两侧
4 space-between 两端对齐 剩余空间在除首尾两个项目外平均分配
5 space-around 分散对齐 剩余空间在每个项目的两侧平均分配
6 space-evenly 平均对齐/等间距 剩余空间在每个项目之间平均分配

例：设置所有项目在“容器”中的垂直方向为”两端对齐”，水平方向左对齐 ，语法place-content:space-between;，如下：

  1.     body .container {
  2.         background-color: antiquewhite;
  3.         width: 40em;
  4.         height: 40em;
  5.         /* 创建grid容器 */
  6.         display: grid;
  7.         /* 简写  设置3例2行的网格*/
  8.         grid-template-columns: repeat(3, 10em);
  9.         grid-template-rows: repeat(2, 10em);
  10.         /* 设置所有项目在“容器”中的垂直方向为"两端对齐"，水平方向左对齐  */
  11.         place-content:space-between end;
  12.     }

8.place-items

grid网格布局和flex弹性盒子中的属性place-items用法大致相同，place-items属性在flex只能控制一个方向排列（单值），而在grid中可以同时控制垂直和水平方向排列（双值）：第一个值控制垂直方向，第二值控制水平方向

序号 属性 描述
1 start 顶（左）对齐: 项目在网格单元中终止线开始排列
2 end 底（右）对齐: 项目在网格单元中终止线开始排列
3 center 居中对齐: 项目在网格单元中居中排列

例：设置所有项目垂直方向居中显示，水平方向右对齐显示，语法：place-items:center end;

  1.     <div class="container">
  2.       <div class="item">①</div>
  3.       <div class="item">②</div>
  4.       <div class="item">③</div>
  5.       <div class="item">④</div>
  6.       <div class="item">⑤</div>
  7.       <div class="item">⑥</div>
  8.       <div class="item">⑦</div>
  9.       <div class="item">⑧</div>
  10.       <div class="item">⑨</div>
  11.     </div>
  12.     <style>
  13.       body .container {
  14.         background-color: antiquewhite;
  15.         width: 40em;
  16.         height: 40em;
  17.         /* 创建grid容器 */
  18.         display: grid;
  19.         grid-template-columns: repeat(3, 10em);
  20.         grid-template-rows: repeat(3, 10em);
  21.         /* 设置项目垂直方向居中显示，水平方向右对齐显示 */
  22.         place-items:center end;
  23.       }
  24.       body .container .item {
  25.         width: 80px;
  26.         height: 80px;
  27.         background-color: aqua;
  28.         font-size: 22px;
  29.       }
  30.     </style>

9.place-self

grid网格布局和flex弹性盒子中的属性place-self用法大致相同，place-self属性在flex只能控制一个方向排列（单值），而在grid中可以同时控制垂直和水平方向排列（双值）：第一个值控制垂直方向，第二值控制水平方向

序号 属性 描述
1 start 顶（右）对齐: 项目在网格区域中以起始线开始排列
2 end 底（左）对齐: 项目在网格区域中以终止线开始排列
3 center 居中对齐: 项目在交叉轴中居中显示

例：设置第5个项目垂直方向底对齐显示，水平方向居中显示，语法：place-self:end center;

  1.     <div class="container">
  2.       <div class="item">①</div>
  3.       <div class="item">②</div>
  4.       <div class="item">③</div>
  5.       <div class="item">④</div>
  6.       <div class="item">⑤</div>
  7.       <div class="item">⑥</div>
  8.       <div class="item">⑦</div>
  9.       <div class="item">⑧</div>
  10.       <div class="item">⑨</div>
  11.     </div>
  12.     <style>
  13.       body .container {
  14.         background-color: antiquewhite;
  15.         width: 40em;
  16.         height: 40em;
  17.         /* 创建grid容器 */
  18.         display: grid;
  19.         grid-template-columns: repeat(3, 10em);
  20.         grid-template-rows: repeat(3, 10em);
  21.         /* 设置项目垂直方向居中显示，水平方向底对齐显示 */
  22.         place-items:center end;
  23.       }
  24.       body .container .item {
  25.         width: 80px;
  26.         height: 80px;
  27.         background-color: aqua;
  28.         font-size: 22px;
  29.       }
  30.       /* 获取第五个项目 */
  31.       body .container .item:nth-last-of-type(5){
  32.         background-color: lightcoral;
  33.         /* 设置该项目垂直方向底对齐显示，水平方向居中显示 */
  34.         place-self: end center;
  35.       }
  36.     </style>

Correcting teacher：PHPzPHPz

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