Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid布局的认识
Blogger Information
Blog 26
fans 0
comment 0
visits 18419
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
588 people have browsed it

布局栅格（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布局的属性有点多的，需要好好复习，多使用尽快的掌握。

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