search

博客列表 >Grid 布局（网格布局）基础知识

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

赵大叔
赵大叔原创
2020年04月15日 03:11:181023浏览

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 布局基础知识

上一条：4.4前端入门之HTML常用属性与事件下一条：Grid布局入门知识学习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多