search

博客列表 >grid布局的认识

grid布局的认识

雪~人胖胖
雪~人胖胖原创
2020年04月16日 17:10:02589浏览

布局栅格（grid）

使用 display:grid 进行创建

1.设置项目在网格中填充方案：行优先或列优先（默认是行优先）

  1.     <style>
  2.       .container {
  3.         width: 400px;
  4.         height: 400px;
  5.         background-color: cadetblue;
  6.         /* 创建grid */
  7.         display: grid;
  8.         /* 设置行优先和列优先 */
  9.         grid-auto-flow: column;
  10.       }
  11.       .item {
  12.         background-color: cyan;
  13.         font-size: 2rem;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <div class="container">
  19.       <div class="item">1</div>
  20.       <div class="item">2</div>
  21.       <div class="item">3</div>
  22.       <div class="item">4</div>
  23.       <div class="item">5</div>
  24.       <div class="item">6</div>
  25.       <div class="item">7</div>
  26.     </div>
  27.   </body>

1.2 设置一个多行多列的网格使用 grid-template-rows 和 grid-template-columns ,例如创建一个三行三列的网格：

  1. /*后面的值可以是百分比，auto或者fr*/
  2. grid-template-rows: 100px 100px auto;
  3. grid-template-columns: 1fr 1fr 1fr;

1.3 重复设置

repeat(数量, 大小)

  1. grid-template-rows: repeat(3, 100px);
  2. grid-template-columns: repeat(3, 100px);

1.4 按分组设置

  1. grid-template-rows: repeat(2, 30px 50px);
  2. grid-template-columns: repeat(2, 30px 50px);

1.5 弹性设置

  1. grid-template-rows: repeat(2, minmax(30px,50px));
  2. grid-template-columns:repeat(2, minmax(30px,50px));

1.6 自动填充

  1. grid-template-columns: repeat(auto-fill, 100px);
  2. grid-template-rows: repeat(auto-fill, 100px);

2 使用默认网格线划分单元格

  1. .item1 {
  2.   background-color: lightgreen;
  3.   grid-row-start: 1;
  4.   grid-row-end: 3;
  5.   grid-column-start: 1;
  6.   grid-column-end: 3;
  7.   /* 缩写 */
  8.   grid-row: 1/3;
  9.   grid-column: 1/3;
  10.   /* 或者 */
  11.   grid-row: 1 / span 2;
  12.   grid-column: 1 / span 2;
  13.   /* 在当前位置缩写*/
  14.   grid-row-end: span 2;
  15.   grid-column-end: span 2;
  16. }

3 用命名网格线划分单元格

  1.    .container {
  2.       width: 400px;
  3.       height: 400px;
  4.       background-color: rgb(184, 198, 199);
  5.       /* 创建grid */
  6.       display: grid;
  7.       grid-template-columns:[c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
  8.       grid-template-rows:[r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
  9.     }
  10.     .item {
  11.       font-size: 2rem;
  12.       background-color: greenyellow;
  13.     }
  14.     .item1{
  15.         grid-row: r2-start / r3-start;
  16.         grid-column: c2-start / c3-start;
  17.     }
  18.   </style>

4 网格区域

  1.     .item1{
  2.         /* grid-area: row-start / col-start / row-end / col-end; */
  3.         grid-area: 1 / 1 / span 2 / 5;
  4.         /* 简写 */
  5.         grid-area:span 2 / span 4;
  6.     }
  7.   </style>

5 命名网格区域实现网页布局

  1.   <style>
  2.     .container {
  3.       width: 400px;
  4.       height: 400px;
  5.       background-color: rgb(184, 198, 199);
  6.       /* 创建grid */
  7.       display: grid;
  8.         grid-template-columns: 80px 1fr 80px;
  9.         grid-template-rows: 40px 1fr 40px;
  10.         /* 相同的名称会合并 */
  11.         grid-template-areas:
  12.         "header header header"
  13.         "left main right"
  14.         "footer footer footer";
  15.     }
  16.     .item {
  17.       font-size: 2rem;
  18.       background-color: greenyellow;
  19.     }
  20.     .item1{
  21.        grid-area: header;
  22.     }
  23.     .item2{
  24.        grid-area: left;
  25.     }
  26.     .item3{
  27.        grid-area: main;
  28.     }
  29.     .item4{
  30.        grid-area: right;
  31.     }
  32.     .item5{
  33.        grid-area: footer;
  34.     }
  35.   </style>
  36. </head>
  37. <body>
  38.   <div class="container">
  39.     <div class="item item1">1</div>
  40.     <div class="item item2">2</div>
  41.     <div class="item item3">3</div>
  42.     <div class="item item4">4</div>
  43.     <div class="item item5">5</div>
  44.   </div>
  45. </body>

6 网格区域占位符

  1.  <style>
  2.     .container {
  3.       width: 400px;
  4.       height: 400px;
  5.       background-color: rgb(184, 198, 199);
  6.       /* 创建grid */
  7.       display: grid;
  8.         grid-template-columns: 80px 1fr 80px;
  9.         grid-template-rows: 40px 1fr 40px;
  10.         /* 相同的名称会合并 */
  11.         /* grid-template-areas:
  12.         "header header header"
  13.         用占位符.代替
  14.         "left main right"
  15.         "footer footer footer";
  16.          grid-template-areas: */
  17.         "header header header"
  18.         ". . ."
  19.         "footer footer footer";
  20.     }
  21.     .item {
  22.       font-size: 2rem;
  23.       background-color: greenyellow;
  24.     }
  25.     .item1{
  26.        grid-area: header;
  27.     }
  28.     .item2{
  29.         /* 自动填充到该区域，是多余的代码 */
  30.        grid-area: left;
  31.     }
  32.     .item3{
  33.         /* 自动填充到该区域，是多余的代码 */
  34.        grid-area: main;
  35.     }
  36.     .item4{
  37.         /* 自动填充到该区域，是多余的代码 */
  38.        grid-area: right;
  39.     }
  40.     .item5{
  41.        grid-area: footer;
  42.     }

7 设置单元格的对齐方式

与flex相似

序号 属性 举例
1 justify-content justify-content: center;
2 align-content align-content: space-between
3 place-content: 垂直对齐 水平对齐; place-content: center start; 
  1.       .container {
  2.         width: 400px;
  3.         height: 400px;
  4.         background-color: green;
  5.         display: grid;
  6.         grid-template-columns: repeat(3, 50px);
  7.         grid-template-rows: repeat(3, 50px);
  8.         place-content: space-between center;
  9.       }

8 设置单元格的对齐方式

序号 属性 举例
1 align-items align-items: center
2 justify-items justify-items: center
3 place-items: 垂直对齐 水平对齐 place-items: end;

place-items: end;的效果：

9单独项目的对齐

序号 属性 举例
1 align-self align-self: center
2 justify-self justify-self: center
3 place-self:垂直对齐 水平对齐 place-self: center; 
  1.      .item5 {
  2.         justify-self: center;
  3.         align-self: center;
  4.         /*简写*/
  5.         place-self: center;
  6.       }

效果图

10设置项目间距

序号 属性 举例
1 column-gap column-gap: 10px;
2 row-gap row-gap: 20px;
3 gap:行间距 列间距 gap: 20px 10px;

总结

1.显式地划分行与列：grid-template-row/column。
2.划分单元格可以用默认网格线和命名网格线。
3.默认网格区域：grid-area: row-start / column-start / row-end / column-end。
4.单元格在容器中的对齐方式：justify-content/align-content。
5.项目在单元格中的对齐方式(某个项目在单元格中的对齐方式)：justify-items/align-items。
6.项目之间的间距:gap:竖直方向 水平方向.
grid布局的属性有点多的，需要好好复习，多使用尽快的掌握。

上一条：华为OceanStor S5600T服务器数据恢复记录下一条：composer 添加类库的两种方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多