Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月30日 学号：478291 Grid（网格布局）属性总结与示例
Blogger Information
Blog 24
fans 4
comment 0
visits 20119
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
12月30日 学号：478291 Grid（网格布局）属性总结与示例
Lin__
Original
649 people have browsed it

容器属性

  • 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>

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