search

博客列表 >grid的建立与划分形式、默认和命名在网格线和网格区域的形式、项目与单元格的对齐方式以及项目之间的间距

grid的建立与划分形式、默认和命名在网格线和网格区域的形式、项目与单元格的对齐方式以及项目之间的间距

雷斯提亚
雷斯提亚原创
2020年04月16日 03:51:411249浏览

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:竖直方向 水平方向
上一条：TP5图片上传之后的压缩下一条：仿php中文网移动端网页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多