search

博客列表 >Grid属性详解

Grid属性详解

P粉036614676
P粉036614676原创
2022年07月14日 23:23:07676浏览

目录结构：

  1. 创建容器
  2. 划分容器块
  3. 创建项目
  4. 项目合并
  5. 项目排列方式
  6. 项目间距
  7. 项目对齐方式
  8. 项目类容在项目中的对齐方式

  9. 单个项目类容在项目中的对齐方式

    1. grid : 创建grid容器

    1. display: grid;

    2.grid-template-columns/rows: 显式生成网格单元

    注意：：
    第22行和23行，可以多加几个值，每个值就是每一行或者每一列的宽度，是容器属性

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.  <title>grid容器/项目属性-1</title>
    8.  <!-- em作为倍数单位，会累乘 -->
    9. </head>
    10. <body>
    11.  <div class="container">
    12.      <div class="item1">1</div>
    13.  </div>
    14.  <style>
    15.      /* 定义容器： */
    16.      .container{
    17.          width: 30em;
    18.          height: 30em;
    19.          background-color: antiquewhite;
    20.          display: grid;
    21.          /* 划分网格单元 */
    22.          grid-template-columns: 10em 10em 10em;
    23.          grid-template-rows: 10em 10em 10em;
    24.      }
    26.      .container>.item1{
    27.          background-color: aliceblue;
    29.      }
    30.  </style>
    31. </body>
    32. </html>

    3. grid-area: 将项目放入指定的网格单元中

    注意：：
    第72行为grid-area属性，第1，2，3，4个参数的意思分别是，从第几行开始，从第几列开始，合并多少行，合并多少列，是容器属性

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.  <title>grid容器/项目属性-1</title>
    8.  <!-- em作为倍数单位，会累乘 -->
    9. </head>
    10. <body>
    11.  <div class="container">
    12.      <div class="item1">1</div>
    13.  </div>
    14.  <style>
    15.      /* 定义容器： */
    16.      .container{
    17.          width: 30em;
    18.          height: 30em;
    19.          background-color: antiquewhite;
    20.          display: grid;
    21.          /* 划分网格单元 */
    22.          grid-template-columns: 10em 10em 10em 50em;
    23.          grid-template-rows: 10em 10em 10em;
    24.      }
    26.      .container>.item1{
    27.          background-color: aliceblue;
    28.           grid-area: 2 / 2 / span 3 /span 3;
    29.  </style>
    30. </body>
    31. </html>

    4. grid-auto-flow: 行与列的排列规则

    注意：
    如果合并了单元格，那么这个属性没有用，是容器属性

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.  <title>grid容器/项目属性-1</title>
    8.  <!-- em作为倍数单位，会累乘 -->
    9. </head>
    10. <body>
    11.  <div class="container">
    12.      <div class="item1">1</div>
    13.      <div class="item2">2</div>
    14.      <div class="item3">3</div>
    15.      <!-- <div class="item4">4</div> -->
    16.  </div>
    17.  <style>
    18.      /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
    19.      /* 定义容器： */
    20.      .container{
    21.          width: 30em;
    22.          height: 30em;
    23.          background-color: antiquewhite;
    24.          display: grid;
    25.          /* 划分网格单元 */
    26.          grid-template-columns: 10em 10em;
    27.          grid-template-rows: 10em 10em  ;
    28.          grid-auto-flow: row;
    29.      }
    31.      .container>.item1{
    32.          background-color: aliceblue;
    33.           /* grid-area: 1 / 1 / span 2 /span 2; */
    34.           margin: 20px;
    35.      }
    36.      .container>.item2{
    37.          background-color: aliceblue;
    38.           /* grid-area: 1 / 3 / span 2 /span 2; */
    39.           margin: 20px;
    40.      }
    41.      .container>.item3{
    42.          background-color: aliceblue;
    43.           /* grid-area: 3 / 1 / span 2 /span 2; */
    44.           margin: 20px;
    45.      }
    46.      .container>.item4{
    47.          background-color: aliceblue;
    48.           /* grid-area: 3 / 3 / span 2 /span 2; */
    49.           margin: 20px;
    50.      }
    51.  </style>
    52. </body>
    53. </html>

    5. grid-auto-row/column: 隐式网格的行/列的大小

    该属性设置超出容器的项目的高度，是容器属性

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.  <title>grid容器/项目属性-1</title>
    8.  <!-- em作为倍数单位，会累乘 -->
    9. </head>
    10. <body>
    11.  <div class="container">
    12.      <div class="item1">1</div>
    13.      <div class="item2">2</div>
    14.      <div class="item3">3</div>
    15.      <div class="item4">4</div>
    16.      <div class="item5">5</div>
    17.  </div>
    18.  <style>
    19.      /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
    20.      /* 定义容器： */
    21.      .container{
    22.          width: 20em;
    23.          height: 20em;
    24.          background-color: antiquewhite;
    25.          display: grid;
    26.          /* 划分网格单元 */
    27.          grid-template-columns: 10em 10em;
    28.          grid-template-rows: 10em 10em  ;
    29.          grid-auto-rows: 5em 5em;
    30.      }
    31.      .container>.item1{
    32.          background-color: aliceblue;
    33.           /* grid-area: 1 / 1 / span 2 /span 2; */
    34.           margin: 20px;
    35.      }
    36.      .container>.item2{
    37.          background-color: aliceblue;
    38.           /* grid-area: 1 / 3 / span 2 /span 2; */
    39.           margin: 20px;
    40.      }
    41.      .container>.item3{
    42.          background-color: aliceblue;
    43.           /* grid-area: 3 / 1 / span 2 /span 2; */
    44.           margin: 20px;
    45.      }
    46.      .container>.item4{
    47.          background-color: aliceblue;
    48.           /* grid-area: 3 / 3 / span 2 /span 2; */
    49.           margin: 20px;
    50.      }
    51.      .container>.item5{
    52.          background-color: red;
    53.           /* grid-area: 3 / 3 / span 2 /span 2; */
    54.           margin: 20px;
    55.      }
    56.  </style>
    57. </body>
    58. </html>

    6. gap: 行列间隙

    该属性指的是项目之间的间隙，是容器属性

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.  <title>grid容器/项目属性-1</title>
    8.  <!-- em作为倍数单位，会累乘 -->
    9. </head>
    10. <body>
    11.  <div class="container">
    12.      <div class="item1">1</div>
    13.      <div class="item2">2</div>
    14.      <div class="item3">3</div>
    15.      <!-- <div class="item4">4</div> -->
    16.  </div>
    17.  <style>
    18.      /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
    19.      /* 定义容器： */
    20.      .container{
    21.          width: 40em;
    22.          height: 40em;
    23.          background-color: antiquewhite;
    24.          display: grid;
    25.          /* 划分网格单元 */
    26.          grid-template-columns: 10em 10em 10em 10em;
    27.          grid-template-rows: 10em 10em 10em 10em;
    28.          /* grid-auto-flow: row; */
    29.           gap: 10px;
    30.      }
    32.      .container>.item1{
    33.          background-color: aliceblue;
    34.           grid-area: 1 / 1 / span 2 /span 2;
    36.      }
    37.      .container>.item2{
    38.          background-color: aliceblue;
    39.           grid-area: 1 / 3 / span 2 /span 2;
    41.      }
    42.      .container>.item3{
    43.          background-color: aliceblue;
    44.           grid-area: 3 / 1 / span 2 /span 2;
    46.      }
    47.      .container>.item4{
    48.          background-color: aliceblue;
    49.           grid-area: 3 / 3 / span 2 /span 2;
    51.      }
    52.  </style>
    53. </body>
    54. </html>

    7. place-content: 所有项目在“容器”中的对齐方式

    各项目在容器中的排列方式，是容器属性

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.  <title>grid容器/项目属性-1</title>
    8.  <!-- em作为倍数单位，会累乘 -->
    9. </head>
    10. <body>
    11.  <div class="container">
    12.      <div class="item1">1</div>
    13.      <div class="item2">2</div>
    14.      <div class="item3">3</div>
    15.      <!-- <div class="item4">4</div> -->
    16.  </div>
    17.  <style>
    18.      /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
    19.      /* 定义容器： */
    20.      .container{
    21.          width: 50em;
    22.          height: 50em;
    23.          background-color: antiquewhite;
    24.          display: grid;
    25.          /* 划分网格单元 */
    26.          grid-template-columns: 10em 10em 10em 10em;
    27.          grid-template-rows: 10em 10em 10em 10em;
    28.          /* grid-auto-flow: row; */
    29.           gap: 10px;
    30.           place-content: center;
    31.      }
    33.      .container>.item1{
    34.          background-color: aliceblue;
    35.           grid-area: 1 / 1 / span 2 /span 2;
    37.      }
    38.      .container>.item2{
    39.          background-color: aliceblue;
    40.           grid-area: 1 / 3 / span 2 /span 2;
    42.      }
    43.      .container>.item3{
    44.          background-color: aliceblue;
    45.           grid-area: 3 / 1 / span 2 /span 2;
    47.      }
    48.      .container>.item4{
    49.          background-color: aliceblue;
    50.           grid-area: 3 / 3 / span 2 /span 2;
    52.      }
    53.  </style>
    54. </body>
    55. </html>

    8. place-items: 所有项目在“网格单元”中的对齐方式

    项目中的类容在项目中的排列方式，是容器属性

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.  <title>grid容器/项目属性-1</title>
    8.  <!-- em作为倍数单位，会累乘 -->
    9. </head>
    10. <body>
    11.  <div class="container">
    12.      <div class="item1">1</div>
    13.      <div class="item2">2</div>
    14.      <div class="item3">3</div>
    15.      <!-- <div class="item4">4</div> -->
    16.  </div>
    17.  <style>
    18.      /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
    19.      /* 定义容器： */
    20.      .container{
    21.          width: 50em;
    22.          height: 50em;
    23.          background-color: antiquewhite;
    24.          display: grid;
    25.          /* 划分网格单元 */
    26.          grid-template-columns: 10em 10em 10em 10em;
    27.          grid-template-rows: 10em 10em 10em 10em;
    28.          /* grid-auto-flow: row; */
    29.           gap: 10px;
    30.           /* place-items: center end; */
    31.      }
    33.      .container>.item1{
    34.          background-color: aliceblue;
    35.           grid-area: 1 / 1 / span 2 /span 2;
    36.           place-items: center end;
    38.      }
    39.      .container>.item2{
    40.          background-color: aliceblue;
    41.           grid-area: 1 / 3 / span 2 /span 2;
    43.      }
    44.      .container>.item3{
    45.          background-color: aliceblue;
    46.           grid-area: 3 / 1 / span 2 /span 2;
    48.      }
    49.      .container>.item4{
    50.          background-color: aliceblue;
    51.           grid-area: 3 / 3 / span 2 /span 2;
    53.      }
    54.  </style>
    55. </body>
    56. </html>

    9. place-self: 某个项目在“网格单元”中的对齐方式

    改变单个项目中的类容在项目中的排列方式，是项目属性

上一条：grid网格布局主要的属性详解下一条：flex布局模式：display:flex；
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多