search

博客列表 >12月30日 学号：478291 Grid（网格布局）属性总结与示例

12月30日 学号：478291 Grid（网格布局）属性总结与示例

Lin__
Lin__原创
2020年01月01日 19:13:24648浏览

容器属性

  • display属性，设置为grid，表示生成块级网格。 当元素设置了网格布局，column、float、clear、vertical-align属性无效。

  • grid-template-columns | grid-template-rows属性，定义网格的列和行，可以设置多个值，以空格分隔

    （1）grid-template-columns定义网格的列宽

    （2）grid-template-rows定义网格的行高

    （3）使用方式：

    1. .container {
    2.   grid-template-columns: <track-size> ... | [<line-name>] <track-size> ...;
    3.   grid-template-rows: <track-size> ... | [<line-name>] <track-size> ...;
    4. }

​ track-size：轨道的大小，即行高和列宽，单位包括css的长度单位（如px）、百分比（%）、fr

​ line-name：网格线名称，可以选择任意的名字，需使用[]符号进行包裹

​ （4）代码实战与运行效果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .container {
  8.             width:600px;
  9.             height: 600px;
  10.             border:2px dashed #3ad900;
  11.             display:grid;/*定义为块网格*/
  12.             grid-template-columns: [first] 150px [second] 20% [third] 1fr;/*定义列宽，一共三列，每一列的列宽分别为150像素，当前容器宽度的20%，占满当前容器剩余的宽度*/
  13.             grid-template-rows: [one] 1fr [two] 150px [three] 10%;/*定义行高，一共三行，每一行的行高分别为占满当前容器剩余的高度，150像素，当前容器宽度的10%*/
  14.         }
  15.         .item{
  16.             border:2px dashed #990055;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div class="container">
  22.         <div class="item">1</div>
  23.         <div class="item">2</div>
  24.         <div class="item">3</div>
  25.         <div class="item">4</div>
  26.         <div class="item">5</div>
  27.         <div class="item">6</div>
  28.         <div class="item">7</div>
  29.         <div class="item">8</div>
  30.         <div class="item">9</div>
  31.     </div>
  32. </body>
  33. </html>

  • grid-template-areas属性，定义网格的名称

    （1）使用方式：

    1. .container {
    2.   grid-template-areas:"grid-area-name|. grid-area-name|. grid-area-name|."/*代表一行*/
    3.     "grid-area-name|. grid-area-name|. grid-area-name|."
    4.     "......";
    5. }
    6. 或
    7. .container {
    8.   grid-template-areas:none;
    9. }

​ grid-area-name：网格区域的名称

​ “.”：代表一个空网格单元

​ none：没有定义网格区域

​ （2）注：每一行代表网格中的一行，使用引号进行包裹，使用回车进行分隔；引号中一个值对应一个单元格，以空格隔开，所有值应该一一对应，不可漏写也不可多写，否则容易出现问题；若名称相同，则自动认定为同一个网格区域

​ （3）代码实战与运行效果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .container {
  8.             width:600px;
  9.             height: 600px;
  10.             border:2px dashed #3ad900;
  11.             display:grid;
  12.             grid-template-columns: 150px 150px 150px;
  13.             grid-template-rows: 150px 150px 150px;
  14.             grid-template-areas:'one two three'
  15.                                 'four five area'
  16.                                 '. . area';
  17.         }
  18.         .item{
  19.             border:2px dashed #990055;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="container">
  25.         <div class="item">1</div>
  26.         <div class="item">2</div>
  27.         <div class="item">3</div>
  28.         <div class="item">4</div>
  29.         <div class="item">5</div>
  30.         <div class="item">6</div>
  31.         <div class="item">7</div>
  32.         <div class="item">8</div>
  33.         <div class="item">9</div>
  34.     </div>
  35. </body>
  36. </html>

  • grid-column-gap | grid-row-gap属性，定义网格间的间距

    （1）grid-column-gap定义列与列之间的间距

    （2）grid-row-gap定义行与行之间的间距

    （3）使用方法：

    1. .container {
    2.   grid-column-gap: <line-size>;
    3.   grid-row-gap: <line-size>;
    4. }

​ line-size：长度值

​ 注：若行、列之间的间距相等，可简写为grid-gap或者gap属性，使用方法：

  1. .container {
  2.   grid-gap: <line-size>;
  3.   或
  4.   gap: <line-size>;
  5. }

​ （5）代码实现与运行效果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .container {
  8.             width:600px;
  9.             height: 600px;
  10.             border:2px dashed #3ad900;
  11.             display:grid;
  12.             grid-template-columns: 150px 150px 150px;
  13.             grid-template-rows: 150px 150px 150px;
  14.             grid-column-gap: 10px;
  15.             grid-row-gap: 10px;
  16.         }
  17.         .item{
  18.             border:2px dashed #990055;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="container">
  24.         <div class="item">1</div>
  25.         <div class="item">2</div>
  26.         <div class="item">3</div>
  27.         <div class="item">4</div>
  28.         <div class="item">5</div>
  29.         <div class="item">6</div>
  30.         <div class="item">7</div>
  31.         <div class="item">8</div>
  32.         <div class="item">9</div>
  33.     </div>
  34. </body>
  35. </html>

  • justify-items|align-items属性，设置项目内容的对齐方式，针对的是每个项目

​ （1）justify-items设置项目内容的水平对齐方式，属性值如下：

序号 属性值 描述
1. start 项目内容与网格区域的左端对齐
2. end 项目内容与网格区域的右端对齐
3. center 项目内容位于网格区域的中间位置
4. stretch 项目内容宽度占据整个网格区域空间（这是默认值）

​ （2）align-items设置项目内容的垂直对齐方式

序号 属性值 描述
1. start 项目内容与网格区域的顶端对齐
2. end 项目内容与网格区域的底端对齐
3. center 项目内容位于网格区域的垂直中心位置
4. stretch 项目内容高度占据整个网格区域空间（这是默认值）

​ （3）使用方式：

  1. .container {
  2.   justify-items: start | end | center | stretch;
  3.   align-items: start | end | center | stretch;
  4. }

​ （4）justify-items|align-items属性也可以简写为place-items属性，顺序为先垂直后水平，属性值同justify-items|align-items属性，使用方式如下：

  1. .container {
  2.   place-items: <align-items> <justify-items>;
  3.     或
  4.   place-items: start;
  5. }

注：当只设置一个值时，表示水平与垂直同一对齐方式

​ （5）代码实现与运行结果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .container {
  8.             width:600px;
  9.             height: 600px;
  10.             border:2px dashed #3ad900;
  11.             display:grid;
  12.             grid-template-columns: 150px 150px 150px;
  13.             grid-template-rows: 150px 150px 150px;
  14.             grid-column-gap: 10px;
  15.             grid-row-gap: 10px;
  16.             /****/
  17.             justify-items: center;
  18.             align-items: center;
  19.             /*等同于*/
  20.             place-items: center center;
  21.             /****/
  22.         }
  23.         .item{
  24.             border:2px dashed #990055;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="container">
  30.         <div class="item">1</div>
  31.         <div class="item">2</div>
  32.         <div class="item">3</div>
  33.         <div class="item">4</div>
  34.         <div class="item">5</div>
  35.         <div class="item">6</div>
  36.         <div class="item">7</div>
  37.         <div class="item">8</div>
  38.         <div class="item">9</div>
  39.     </div>
  40. </body>
  41. </html>

  • justify-content | align-content属性，设置所有项目在容器中的对齐方式，将所有的项目看做一个整体进行对齐

    （1）justify-content设置项目的水平对齐方式，属性值如下：

序号 属性值 描述
1. start 项目与网格容器的左边对齐
2. end 项目与网格容器的右边对齐
3. center 项目与网格容器的中间对齐
4. stretch 调整项目的大小，让宽度填充整个网格容器
5. space-around 分散对齐，每个项目中间的间隙相同，左右两端放置一半的空间
6. space-between 两端对齐，左右两端没有空间
7. space-evenly 每个项目中间的间隙、每个项目与网格边端间隙相同

（2）align-content设置项目的垂直对齐方式，属性值如下：

序号 属性值 描述
1. start 项目与网格容器的顶部对齐
2. end 项目与网格容器的底端对齐
3. center 项目与网格容器的中间对齐
4. stretch 调整项目的大小，让高度填充整个网格容器
5. space-around 分散对齐，每个项目中间的间隙相同，上下两端放置一半的空间
6. space-between 两端对齐，上下两端没有空间
7. space-evenly 每个项目中间的间隙、每个项目与网格边端间隙相同

（3）使用方式：

  1.   .container {
  2.     justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  3.     align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
  4.   }

（4）justify-content | align-content属性可以简写为place-content，顺序为先垂直后水平，使用方式如下：

  1.   .container {
  2.     place-content: <align-content> <justify-content>;
  3.   }

（5）代码示例与运行结果：

  1.   <!DOCTYPE html>
  2.   <html lang="en">
  3.   <head>
  4.       <meta charset="UTF-8">
  5.       <title></title>
  6.       <style>
  7.           .container {
  8.               width:600px;
  9.               height: 600px;
  10.               border:2px dashed #3ad900;
  11.               display:grid;
  12.               grid-template-columns: 150px 150px 150px;
  13.               grid-template-rows: 150px 150px 150px;
  14.               grid-column-gap: 10px;
  15.               grid-row-gap: 10px;
  16.               /****/
  17.               justify-content: space-between;
  18.               align-content: space-evenly;
  19.               /*等同于*/
  20.               place-content: space-evenly space-between;
  21.               /****/
  22.           }
  23.           .item{
  24.               border:2px dashed #990055;
  25.           }
  26.       </style>
  27.   </head>
  28.   <body>
  29.       <div class="container">
  30.           <div class="item">1</div>
  31.           <div class="item">2</div>
  32.           <div class="item">3</div>
  33.           <div class="item">4</div>
  34.           <div class="item">5</div>
  35.           <div class="item">6</div>
  36.           <div class="item">7</div>
  37.           <div class="item">8</div>
  38.           <div class="item">9</div>
  39.       </div>
  40.   </body>
  41.   </html>

项目属性

  • grid-column-start | grid-column-end | grid-row-start | grid-row-end属性，通过设定起止位置确定项目在网格内的位置

    （1）grid-column-start: 起始列编号

    （2）grid-column-end: 终止列编号

    （3）grid-row-start: 起始行编号

    （4）grid-row-end: 终止行编号

    （5）使用方式：

    1. .item {
    2.   grid-column-start: <number> | <name> | span <number> | span <name> | auto
    3.   grid-column-end: <number> | <name> | span <number> | span <name> | auto
    4.   grid-row-start: <number> | <name> | span <number> | span <name> | auto
    5.   grid-row-end: <number> | <name> | span <number> | span <name> | auto
    6. }

    number：网格线的编号

    name：网格线的名称

    auto：自动布局，或者自动跨度，或者跨越一个默认的轨道

    （6）grid-column-start与grid-column-end可简写为grid-column,grid-row-start与grid-row-end可简写为grid-row，使用方式如下：

    1. .item {
    2.   grid-column: <start-line> / <end-line> | <start-line> / span <value>;
    3.   grid-row: <start-line> / <end-line> | <start-line> / span <value>;
    4. }

    /前后都要加空格

    （7）示例代码与运行结果：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title></title>
    6.     <style>
    7.         .container {
    8.             width:600px;
    9.             height: 600px;
    10.             border:2px dashed #3ad900;
    11.             display:grid;
    12.             grid-template-columns: 150px 150px 150px;
    13.             grid-template-rows: 150px 150px 150px;
    14.             grid-column-gap: 5px;
    15.             grid-row-gap: 5px;
    16.             justify-content: space-between;
    17.             align-content: space-evenly;
    18.         }
    19.         .item{
    20.             border:2px dashed #990055;
    21.         }
    22.         /*定义第一个项目的位置*/
    23.         .item:nth-child(1){
    24.             background-color: coral;
    25.             /****/
    26.             grid-column-start: 2;
    27.             grid-column-end: 4;
    28.             grid-row-start: 2;
    29.             grid-row-end: 4;
    30.             /*等同于*/
    31.             grid-column: 2 / 4;
    32.             grid-row: 2 / 4;
    33.             /*等同于*/
    34.             grid-column: 2 / span 2;
    35.             grid-row: 2 / span 2;
    36.             /****/
    37.         }
    38.     </style>
    39. </head>
    40. <body>
    41.     <div class="container">
    42.         <div class="item">1</div>
    43.         <div class="item">2</div>
    44.         <div class="item">3</div>
    45.         <div class="item">4</div>
    46.         <div class="item">5</div>
    47.         <div class="item">6</div>
    48.         <div class="item">7</div>
    49.         <div class="item">8</div>
    50.         <div class="item">9</div>
    51.     </div>
    52. </body>
    53. </html>

  • grid-area属性

    （1）使用方式：

    1. .item {
    2.   grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
    3. }

    name ：grid-template-areas 中定义的命名

    row-start / column-start / row-end / column-end：按逆时针顺序放置，可以是数字，也可以是网格线的名字

    /前后都要加空格

    （2）代码实战与运行效果：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title></title>
    6.     <style>
    7.         .container {
    8.             width:600px;
    9.             height: 600px;
    10.             border:2px dashed #3ad900;
    11.             display:grid;
    12.             grid-template-columns: 150px 150px 150px;
    13.             grid-template-rows: 150px 150px 150px;
    14.             grid-column-gap: 5px;
    15.             grid-row-gap: 5px;
    16.             justify-content: space-between;
    17.             align-content: space-evenly;
    18.             grid-template-areas:'one two three'
    19.                                 'four five area'
    20.                                 '. . area';
    21.         }
    22.         .item{
    23.             border:2px dashed #990055;
    24.         }
    25.         .item:nth-child(1){
    26.             background-color: coral;
    27.             grid-area: 1 / 2 / 3 / five;
    28.         }
    29.     </style>
    30. </head>
    31. <body>
    32.     <div class="container">
    33.         <div class="item">1</div>
    34.         <div class="item">2</div>
    35.         <div class="item">3</div>
    36.         <div class="item">4</div>
    37.         <div class="item">5</div>
    38.         <div class="item">6</div>
    39.         <div class="item">7</div>
    40.         <div class="item">8</div>
    41.         <div class="item">9</div>
    42.     </div>
    43. </body>
    44. </html>

  • justify-self | align-self属性，定义单个项目的对齐方式

    （1）justify-self设置水平方向对齐方式

序号 属性值 描述
1. start 内容与网格区域的左端对齐
2. end 内容与网格区域的右端对齐
3. center 内容位于网格区域的中间位置
4. stretch 内容宽度占据整个网格区域空间（这是默认值）

（2）align-self设置垂直方向对齐方式

序号 属性值 描述
1. start 内容与网格区域的左端对齐
2. end 内容与网格区域的右端对齐
3. center 内容位于网格区域的中间位置
4. stretch 内容宽度占据整个网格区域空间（这是默认值）

（3）使用方式：

  1.   .item {
  2.     justify-self: start | end | center | stretch;
  3.     align-self: start | end | center | stretch;
  4.   }

（4）justify-self与align-self可简写为place-self属性，先垂直后水平，使用方式如下：

  1.   .item {
  2.     place-self: <align-self> <justify-self>;
  3.   }

（5）代码示例与运行结果：

  1.   <!DOCTYPE html>
  2.   <html lang="en">
  3.   <head>
  4.       <meta charset="UTF-8">
  5.       <title></title>
  6.       <style>
  7.           .container {
  8.               width:600px;
  9.               height: 600px;
  10.               border:2px dashed #3ad900;
  11.               display:grid;
  12.               grid-template-columns: 150px 150px 150px;
  13.               grid-template-rows: 150px 150px 150px;
  14.               grid-column-gap: 5px;
  15.               grid-row-gap: 5px;
  16.               justify-content: space-between;
  17.               align-content: space-evenly;
  18.           }
  19.           .item{
  20.               border:2px dashed #990055;
  21.           }
  22.           .item:nth-child(1){
  23.               background-color: coral;
  24.               /****/
  25.               justify-self: center;
  26.               align-self: center;
  27.               /*等同于*/
  28.               place-self: center center;
  29.               /****/
  30.           }
  31.       </style>
  32.   </head>
  33.   <body>
  34.       <div class="container">
  35.           <div class="item">
  36.               <div>hello</div>
  37.               <div>world</div>
  38.           </div>
  39.           <div class="item">2</div>
  40.           <div class="item">3</div>
  41.           <div class="item">4</div>
  42.           <div class="item">5</div>
  43.           <div class="item">6</div>
  44.           <div class="item">7</div>
  45.           <div class="item">8</div>
  46.           <div class="item">9</div>
  47.       </div>
  48.   </body>
  49.   </html>

上一条：1223_jquery文档处理与筛选 第38课下一条：综合实战第五课：laravel基础4-PHP培训九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多