Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid对齐方式与基础实战
Blogger Information
Blog 33
fans 1
comment 0
visits 21836
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
grid对齐方式与基础实战
冰雪琉璃
Original
776 people have browsed it

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>

```

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