search

博客列表 >grid对齐方式与基础实战

grid对齐方式与基础实战

冰雪琉璃
冰雪琉璃原创
2021年04月06日 16:35:03777浏览

grid对齐方式与基础实战

网格单元的对齐方式

  1. 属性值：place-items:垂直 水平。
  2. 方位词:center start end
  3. 必须书写在容器中
  4. place-items:center(表示垂直水平都居中对齐)
  5. 只有项目在网格单元中有剩余空间时对齐才有意义。

    设置容器中某一个项目在网格单元中的对齐方式

    1. 书写在具体某一个项目中
    2. place-self：垂直方向 水平方向；
    3. 方位词：center end start.
    4. place-self：垂直 水平

      网格容器中的对齐方式

    5. 属性值：place-content:垂直 水平。
    6. 书写在容器中

      1、将所有项目作为一个整体在容器中对齐

      place-content：start start；默认
      place-content: center；

      2、将所有项目打散成独立个体在容器中设置对齐方式

      place-content: space-between;俩端对齐
      place-content: space-around ；分散对齐
      place-content: space-evenly;平均对齐

      使用命名单元格的方式实现圣杯布局

  6. grid-area属性可以命名网格区域

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Document</title>
    6. </head>
    7. <body>
    8. <style>
    9.    body {
    10.          display: grid;
    11.          grid-template-columns: 15em minmax(50vh, auto) 15em;
    12.          grid-template-rows: 3em minmax(80vh, auto) 3em;
    13.          gap: .5em;
    14.          grid-template-areas: 'header header header' 'left main right' 'footer                 footer footer';
    15.      }
    16.      body * {
    17.          border: 1px solid #ccc;
    18.      }
    19.      header {
    20.          grid-area: header;
    21.          background-color: green;
    22.      }
    23.      footer {
    24.          grid-area: footer;
    25.          background-color: green;
    26.        }
    27.     aside.left{
    28.          grid-area:left;
    29.          background-color: green;
    30.          min-height: 15em;
    32.      }
    33.      aside.right {
    34.          grid-area:right;
    35.          background-color: green;
    36.          min-height: 15em;
    37.       }
    38.      main {
    39.          grid-area: main;
    40.          background-color: green;
    41.          min-height: 15em;
    42.      }
    43.  </style>
    44.  <body>
    45.  <header>header</header>
    46.  <main>main</main>
    47.  <aside class="left">left</aside>
    48.  <aside class="right">right</aside>
    49.  <footer>footer</footer>
    50. </body>
    51. </html>

    使用grid模拟栅格

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>使用grid模拟栅格布局</title>
    6. <style>
    7.      * {
    8.          margin: 0;
    9.          padding: 0;
    10.          box-sizing: border-box;
    11.      }
    12.      .row {
    13.          display: grid;
    14.          /*将页面分为等宽的12列*/
    15.          grid-template-columns: repeat(12, 1fr);
    16.          gap: .5em;
    17.      }
    18.      .item {
    19.          border: 1px solid #ccc;
    20.          background-color: red;
    21.      }
    22.      .col-12 {
    23.      /*auto代表的是默认行的位置 span代表的是跨的列数*/
    24.          grid-area:auto/ span 12;
    25.      }
    26.      .col-11 {
    27.          grid-area:auto/ span 11;
    28.      }
    29.      .col-10 {
    30.          grid-area: auto / span 10;
    31.      }
    32.      .col-9 {
    33.          grid-area: auto / span 9;
    34.      }
    35.      .col-8 {
    36.          grid-area: auto / span 8;
    37.      }
    38.      .col-7 {
    39.          grid-area: auto / span 7;
    40.      }
    41.      .col-6 {
    42.          grid-area: auto / span 6;
    43.      }
    44.      .col-5 {
    45.          grid-area: auto / span 5;
    46.      }
    47.      .col-4 {
    48.          grid-area: auto / span 4;
    49.      }
    50.      .col-3 {
    51.          grid-area: auto / span 3;
    52.      }
    53.      .col-2 {
    54.          grid-area: auto / span 2;
    55.      }
    56.      .col-1 {
    57.          grid-area: auto / span 1;
    58.      }
    59.  </style>
    60. </head>
    61. <body>
    62.  <div class="container">
    63.      <div class="row">
    64.          <div class=" item col-12">12列</div>
    65.          <div class=" item col-6">6列</div>
    66.          <div class=" item col-6">6列</div>
    67.          <div class=" item col-5">5列</div>
    68.          <div class=" item col-5">5列</div>
    69.          <div class=" item col-4">4列</div>
    70.          <div class=" item col-4">4列</div>
    71.          <div class=" item col-4">4列</div>
    72.          <div class=" item col-3">3列</div>
    73.          <div class=" item col-3">3列</div>
    74.          <div class=" item col-3">3列</div>
    75.          <div class=" item col-3">3列</div>
    76.          <div class=" item col-1">1列</div>
    77.          <div class=" item col-1">1列</div>
    78.          <div class=" item col-1">1列</div>
    79.          <div class=" item col-1">1列</div>
    80.          <div class=" item col-1">1列</div>
    81.          <div class=" item col-1">1列</div>
    82.          <div class=" item col-1">1列</div>
    83.          <div class=" item col-1">1列</div>
    84.          <div class=" item col-1">1列</div>
    85.          <div class=" item col-1">1列</div>
    86.          <div class=" item col-1">1列</div>
    87.          <div class=" item col-1">1列</div>
    88.      </div>
    89.  </div>
    90. </body>
    91. </html>

```

上一条：编写迷你版MVC小框架具体步骤以及心得体会下一条：flex 容器的 flex-flow, justify-content, align-items, align-content 属性的功能及参数 ----0324
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多