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>

```

更多相关文章

  1. grid的描述
  2. 210329 CSS 媒体查询 grid布局
  3. 实现全托管，腾讯云服务网格的架构演进
  4. CSS中flex布局的属性及应用
  5. 【布局】教你用Grid网格布局详细教程入门笔记+实战案例
  6. CSS：flex布局理解及实例演示flex容器中的四个属性的功能、参数、
  7. C语言实现乘法口诀表
  8. 苏宁首页仿写，及grid布局相关属性预习
  9. flex项目上的三个属性及移动商城首页的页眉和页脚的布局

随机推荐

  1. 使用PHP来获取客户端和服务端IP
  2. PHP 是怎么接收到请求的？
  3. 关于mysql操作的详细总结以及实例（一）
  4. PHP之十六个魔术方法详解（总结）
  5. 在PHP中处理JSON数组以及对象
  6. php结合layui前端实现多图上传
  7. docker-compose部署php项目
  8. PHP编码风格规范详细介绍
  9. PHP中 __toString()方法详解
  10. 安装docker和docker-compose