Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Grid 布局（网格布局）基础知识
Blogger Information
Blog 119
fans 3
comment 1
visits 94368
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 布局（网格布局）基础知识
赵大叔
Original
1021 people have browsed it

Grid 布局（网格布局）基础知识

网格布局的基本步骤: 1. 生成网格; 2. 放置项目; 3.设置属性

1、display: grid;设置容器为网格布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>常用grid布局举例</title>
  6.     <style>
  7.         /*设置为grid布局*/
  8.         .container {
  9.             display: grid;
  10.             background: lightgoldenrodyellow;
  11.             width: 400px;
  12.             height: 300px;
  14.             /*画网格，此处用自定义网格区域命名方式*/
  15.             grid-template-columns: 80px 1fr 80px;
  16.             grid-template-rows: 40px 1fr 40px;
  18.             /* 设置命名网格区域, 相同名称的命名区域会合并 */
  19.             grid-template-areas:
  20.                     "header header header"
  21.                     "left main right"
  22.                     "footer footer footer";
  23.         }
  25.         /*使用自定义命名区域将项目放到网格*/
  26.         .item1 {
  27.             background-color: lightgreen;
  28.             grid-area: header;
  29.         }
  30.         .item2 {
  31.             background-color: lightpink;
  32.             grid-area: left;
  33.         }
  34.         .item3 {
  35.             background-color: yellow;
  36.             grid-area: main;
  37.         }
  38.         .item4 {
  39.             background-color: lightgrey;
  40.             grid-area: right;
  41.         }
  42.         .item5 {
  43.             background-color: violet;
  44.             grid-area: footer;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49. <div class="container">
  50.     <div class="item1">1</div>
  51.     <div class="item2">2</div>
  52.     <div class="item3">3</div>
  53.     <div class="item4">4</div>
  54.     <div class="item5">5</div>
  55. </div>
  56. </body>
  57. </html>

效果图：

2、place-content设置网格在容器中的对齐方式

  1. .container {
  2.             display: grid;
  3.             background: lightgoldenrodyellow;
  4.             width: 400px;
  5.             height: 300px;
  7.             /*画网格，此处用自定义网格区域命名方式*/
  8.             grid-template-columns: repeat(3, 80px);
  9.             grid-template-rows: repeat(3, 80px);
  11.             /*设置网格在容器中的对齐方式*/
  12.             /*place-content: 垂直对齐方式 水平对齐方式*/
  13.             /*place-content: start start; !*默认*!*/
  14.             /*place-content: start end;*/
  15.             /*place-content: start center;*/
  16.             /*place-content: end start;*/
  17.             /*place-content: end end;*/
  18.             /*place-content: end center;*/
  19.             place-content: center;
  20.         }

效果图：

3、place-content设置所有项目网格在容器中的对齐方式

  1.  /*设置为grid布局*/
  2.         .container {
  3.             display: grid;
  4.             background: lightgoldenrodyellow;
  5.             width: 400px;
  6.             height: 300px;
  8.             /*画网格，此处用自定义网格区域命名方式*/
  9.             grid-template-columns: repeat(3, 80px);
  10.             grid-template-rows: repeat(3, 80px);
  12.             /*设置网格在容器中的对齐方式*/
  13.             /*place-content: space-between space-between;*/
  14.             /*place-content: space-between space-around;*/
  15.             /*place-content: space-between space-evenly;*/
  16.             place-content: space-around space-around;
  18.         }

效果图：

4、place-items统一设置所有项目在单元格或网格区域中对齐方式

  1. .container {
  2.             display: grid;
  3.             background: lightgoldenrodyellow;
  4.             width: 400px;
  5.             height: 300px;
  7.             /*画网格，此处用自定义网格区域命名方式*/
  8.             grid-template-columns: repeat(3, 80px);
  9.             grid-template-rows: repeat(3, 80px);
  11.             /*统一设置所有项目在单元格或网格区域中对齐方式*/
  12.             /*place-items: end start;*/
  13.             place-items: center;
  15.         }
  17.         .item {
  18.             background-color: lightpink;
  19.         }

效果图：

5、justify-self设置某个项目在单元格或网格区域内的对齐方式

  1. .container {
  2.             display: grid;
  3.             background: lightgoldenrodyellow;
  4.             width: 400px;
  5.             height: 300px;
  7.             /*画网格，此处用自定义网格区域命名方式*/
  8.             grid-template-columns: repeat(3, 80px);
  9.             grid-template-rows: repeat(3, 80px);
  11.             /*统一设置所有项目在单元格或网格区域中对齐方式*/
  12.             /*place-items: end start;*/
  13.             place-items: center;
  15.         }
  17.         .item.item5 {
  18.             background-color: lightpink;
  19.             /*设置某个项目在单元格或网格区域内的对齐方式*/
  20.             place-self: start center;
  21.         }

效果图：

6、gap设置容器中行与列之间的间距/间隙

  1. .container {
  2.             display: grid;
  3.             background: lightgoldenrodyellow;
  4.             width: 400px;
  5.             height: 300px;
  7.             /*画网格，此处用自定义网格区域命名方式*/
  8.             grid-template-columns: repeat(3, 80px);
  9.             grid-template-rows: repeat(3, 80px);
  11.             /*gap: 5px 8px;*/
  12.             gap: 10px;
  14.         }
  16.         .item {
  17.             background-color: lightpink;
  18.         }

效果图：

7、grid布局总结

7.1 常用的把项目放到自定义设置的命名网格区域，更具有语义化，应该比较常用，grid-template-areas:和grid-area: 命名;。

7.2 grid常用属性和flex有很多相似处，建议重点记忆简写用法。place-content、place-items、place-self。

PS: 介于文章篇幅和一些属性值具有相似性，本文主要例举一部分进行演示，有关网格布局的详细知识参考另一骗博客。

博客地址：
Grid 布局基础知识

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