Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid的建立与划分形式、默认和命名在网格线和网格区域的形式、项目与单元格的对齐方式以及项目之间的间距
Blogger Information
Blog 8
fans 1
comment 0
visits 10183
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
1248 people have browsed it

grid 容器

1. grid容器的行和列

1.1 创建grid容器

  • 文本：display: grid
序号 文本 描述
1 grid-template-columns 创建列，后面有几位数表示有多少列
2 grid-template-rows 创建行，后面有几位数表示有多少行
注：

对于放置不下的项目，会隐式生成单元格：

序号 文本 举例
1 geid-auto-rows geid-auto-rows:auto
例：
  1. <head>
  2.  <style>
  3.         .container{
  4.             width: 400px;
  5.             height: 400px;
  6.             background-color:pink;
  7.             display: grid;
  8.             grid-template-columns: 100px 100px 100px;
  9.             grid-template-rows: 100px 100px 100px;
  11.         }
  12.         .item{
  13.             background-color: royalblue;
  14.             font-size: 2.5rem;
  15.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="container">
  21.         <div class="item document1">1</div>
  22.         <div class="item document2">2</div>
  23.         <div class="item document3">3</div>
  24.         <div class="item document4">4</div>
  25.         <div class="item document5">5</div>
  26.         <div class="item document6">6</div>
  27.         <div class="item document7">7</div>
  28.         <div class="item document8">8</div>
  29.         <div class="item document9">9</div>
  30.         <div class="item document10">10</div>
  31.         </div>

1.2 grid行和列的设置：

  • （1）固定值：
    1.     grid-template-columns: 100px 100px 100px;
    2.     grid-template-rows: 100px 100px 100px;

  • （2）百分比：

    1. grid-template-columns: 10% 30% auto;
    2. grid-template-rows: 20% 30% 20%;

  • （3）比例：

    1.   grid-template-columns: 1fr 3fr 2fr;
    2.   grid-template-rows: 2fr auto 3fr;

  • （4）重复设置：

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

  • （5）分组设置：

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

  • （6）弹性：

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

  • （7）自动填充：

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

2. 用默认的网格线来划分单元格：

2.1 属性：

序号 属性 描述
1 grid-row-start 网格线水平开始位置
2 grid-row-end 网格线水平结束位置
3 grid-column-start 网格线垂直开始位置
4 grid-column-end 网格线垂直结束位置
例：
  1. <head>
  2.     <style>
  3.         .container{
  4.             width: 400px;
  5.             height: 400px;
  6.             background-color:pink;
  7.             display: grid;
  8.             grid-template-columns: repeat(4,1fr);
  9.             grid-template-rows: repeat(4,1fr);
  10.         }
  11.         .item{
  12.             background-color: royalblue;
  13.             font-size: 2.5rem;
  14.         }
  15.         .document1{
  16.             background-color: red;
  17.             grid-row-start: 1;
  18.             grid-row-end: 3;
  19.             grid-column-start: 1;
  20.             grid-column-end: 3;
  21.         }
  22.     </style>
  23. </head>

2.2 简写：

  • 格式：grid-row(grid-column):start/end
例：
  1.  .document1{
  2.             background-color: red;
  3.             grid-row: 1/3;
  4.             grid-column: 1/3;
  5.         }

3. 使用命名网格线来划分单元格

3.1 属性：

  • （1）格式：[r1-start]
  • （2）前面的字母可以随意变换
  • （3）需要写到grid-template-column/rows后面
    举例：
    1. <style>
    2.       .container{
    3.           width: 400px;
    4.           height: 400px;
    5.           background-color:pink;
    6.           display: grid;
    7.           grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end c4-start] 100px [c4-end];
    8.           grid-template-rows:[r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end r4-start] 100px [r4-end];
    9.       }
    10.       .item{
    11.           background-color: royalblue;
    12.           font-size: 2.5rem;
    13.       }
    14.       .document1{
    15.           background-color: chartreuse;
    16.           grid-column-end: c2-end;
    17.           grid-row-end: r2-end;
    18.       }
    19.        .document3{
    20.           background-color: crimson;
    21.           grid-row-start: r3-start;
    22.           grid-column-start: c2-start;
    23.       }
    24.   </style>
    注：
  • 默认就是跨越一行/一列,所以可以省略

3.2 简写：

  • 语法：``
    1. .document1{
    2.           background-color: chartreuse;
    3.           grid-column:c3-start/c4-start;
    4.           grid-row: r2-start/r2-end;
    5.       }
    6.       .document3{
    7.           background-color: crimson;
    8.           grid-column:c2-start/c3-start;
    9.           grid-row: r3-start/r3-end;
    10.       }

3.3 用偏移量来转化：

  1.  .document1{
  2.             background-color: chartreuse;
  3.             grid-column-start: span 2;
  4.             grid-row-start: span 2;
  5.         }
  6.         .document3{
  7.             background-color: crimson;
  8.             grid-column-start: span 2;
  9.             grid-row-start: span 1;
  10.         }

4.默认网格区域：

  • 格式：grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end
例：
  1. .document1{
  2.             background-color: chartreuse;
  3.             grid-area: 1/1/3/3;
  4.         }
  5.         .document3{
  6.             background-color: crimson;
  7.             grid-area: 2/3/span 1/span 2;
  8.         }

5. 命名网格区域

  • 格式：grid-template-area: "-- -- --"
  • 注：设置网格命名区域，相同名称的命名区域会合并
例：
  1. <head>
  2. <style>
  3.         .container{
  4.             width: 400px;
  5.             height: 400px;
  6.             background-color:pink;
  7.             display: grid;
  8.             grid-template-columns: 60px auto 100px;
  9.             grid-template-rows:50px auto 80px;
  10.             grid-template-areas: 
  11.             "heard heard heard"
  12.             "left main right"
  13.             "footer footer footer";
  14.         }
  15.         .item{
  16.             background-color: royalblue;
  17.             font-size: 2.5rem;
  18.         }
  19.         .document1{
  20.             background-color: chartreuse;
  21.             grid-area: heard;
  22.         }
  23.         .document2{
  24.             background-color: lightcoral;
  25.             grid-area: left;
  26.         }
  27.         .document3{
  28.             background-color: crimson;
  29.             grid-area: main;
  30.         }
  31.         .document4{
  32.             background-color: lightslategrey;
  33.             grid-area:right;
  34.         }
  35.         .document5{
  36.             grid-area: footer;
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41.     <div class="container">
  42.         <div class="item document1">1</div>
  43.         <div class="item document2">2</div>
  44.         <div class="item document3">3</div>
  45.         <div class="item document4">4</div>
  46.         <div class="item document5">5</div>
  47.     </div>
  48. </body>

6. 网格区域占位符

例：
  1.  grid-template-areas:
  2.             "heard heard heard"
  3.             ". . ."
  4.             "footer footer footer";
  5.              .item{
  6.             background-color: royalblue;
  7.             font-size: 2.5rem;
  8.         }
  9.         .document1{
  10.             background-color: chartreuse;
  11.             grid-area: heard;
  12.         }
  13.         .document2{
  14.             background-color: lightcoral;
  15.         }
  16.         .document3{
  17.             background-color: crimson;
  18.         }
  19.         .document4{
  20.             background-color: lightslategrey;
  21.         }
  22.         .document5{
  23.             grid-area: footer;
  24.         }

7. 设置单元格在容器中的对齐方式

  • （1）justify-content:主轴对齐方式
  • （2）align-content：交叉轴对齐方式

    7.1 属性设置：

    例：
    1. .container{
    2.           width: 400px;
    3.           height: 400px;
    4.           background-color:pink;
    5.           display: grid;
    6.           grid-template-columns: repeat(3,100px);
    7.           grid-template-rows:repeat(3,100px);
    8.           justify-content: space-evenly;
    9.           align-content: space-around;
    10.       }

    7.2 对齐方式简写：

  • 语法：place-content: 垂直对齐 水平对齐
    例：
    1. .container{
    2.           width: 400px;
    3.           height: 400px;
    4.           background-color:pink;
    5.           display: grid;
    6.           grid-template-columns: repeat(3,100px);
    7.           grid-template-rows:repeat(3,100px);
    8.           place-content: space-evenly space-around;
    9.       }

8. 设置项目在单元格中的对齐方式

  • （1）justify-items：网格中的内容顺着主轴对齐
  • （2）align-items：网格中的内容顺着交叉轴对齐

    8.1 属性设置：

    例：
  1. justify-items: end;
  2. align-items:start

8.2 对齐方式简写：

  • 语法：place-items: 垂直 水平
    例：
    1. place-items: start end;

9. 设置某个项目在单元格的对齐方式

  • （1）justify-self单个网格中的内容顺着主轴对齐
  • （2）align-self单个网格中的内容顺着交叉轴对齐

    9.1 属性设置：

    例：
    1.      .container{
    2.           width: 400px;
    3.           height: 400px;
    4.           background-color:pink;
    5.           display: grid;
    6.           grid-template-columns: repeat(3,1fr);
    7.           grid-template-rows:repeat(3,1fr);
    8.       }
    9.       .item{
    10.           background-color: royalblue;
    11.           font-size: 2.5rem;
    12.       }
    13.       .document1{
    14.           background-color: chartreuse;
    15.           justify-self: center;
    16.           align-self: center;
    17.       }
    18.       .document2{
    19.           background-color: lightcoral;
    20.           justify-self: end;
    21.           align-self:end
    22.       }

    9.2 对齐方式简写：

    1.       .document1{
    2.           background-color: chartreuse;
    3.           place-self: center center;
    4.       }
    5.       .document2{
    6.           background-color: lightcoral;
    7.           place-self: end end;

10. 设置项目之间的间距

  • 语法：gap:竖直方向 水平方向
    例：
    1. .container{
    2.           width: 400px;
    3.           height: 400px;
    4.           background-color:pink;
    5.           display: grid;
    6.           grid-template-columns: repeat(3,1fr);
    7.           grid-template-rows:repeat(3,1fr);
    8.           gap: 10px 20px;
    9.       }

课程总结：

  • （1）grid容器也需要display属性创建
  • （2）grid可以显式地划分行与列：grid-template-row/column
  • （3）grid划分行与列可以用不同形式划分（例：固定值、百分比、比例等等）
  • （4）grid划分单元格可以用默认网格线和命名网格线来划分
  • （5）默认网格线：grid-row(column)-start(end)
  • （6）命名网格线：grid-row(column)-start(end)：r1-start/r3-end
  • （7）默认网格区域：grid-area: row-start / column-start / row-end / column-end
  • （8）单元格在容器中的对齐方式：justify-content/align-content
  • （9）项目在单元格中的对齐方式(某个项目在单元格中的对齐方式)：justify-items/align-items
  • （10)项目之间的间距:gap:竖直方向 水平方向
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：grid布局的强大之处, 以后会体会到
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