CSS网格布局

1. grid布局的介绍

1.1 适用场景

1.2 网格布局的概念

1.3 网格轨道

【1】语法

【2】对齐方式

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      /* 给父亲加网格布局属性 */
      display: grid;
      /* 创建行轨道 */
      grid-template-rows: 100px 100px 100px;
      /* 创建列轨道 */
      grid-template-columns: 100px 100px 100px;
      /* 让列轨道两端对齐 */
      justify-content: space-between;
      width: 320px;
      height: 320px;
      border: 1px solid red;
      margin: 20px;
    }

    .box div {
      background-color: pink;
    }

    /* 1.不要设置行轨道 */
    /* 2.给子盒子高度，让子盒子撑起来 */
    .content {
      /* 给父亲加网格布局属性 */
      display: grid;
      /* 创建列轨道 */
      grid-template-columns: 160px 160px 160px 160px 160px 160px;
      justify-content: space-between;
      width: 1000px;
      margin: 0 auto;
      border: 1px solid red;
    }

    .content div {
      height: 100px;
      background-color: pink;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
    <div class="item7">7</div>
    <div class="item8">8</div>
    <div class="item9">9</div>
  </div>
  <div class="content">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>

【3】绘制网格轨道

【4】网格间距

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .nav {
      /* 设置网格布局 */
      display: grid;
      /* 定义网格列数 */
      grid-template-columns: repeat(11, 1fr);
      /* 定义网格行数 */
      grid-template-rows: 1fr 1fr;
      width: 935px;
      height: 66px;
      /* border: 1px solid red;*/
      margin: 100% auto;
      gap: 10px;
    }

    /* 设置a的盒子 */
    .nav a {
      background-color: #F6F7F8;
      border-radius: 6px;
      border: 1px solid #F1F2F3;
      /* 居中 */
      text-align: center;
      line-height: 28px;
    }
  </style>
</head>

<body>
  <div class="nav">
    <a href="#">番剧</a>
    <a href="#">动画</a>
    <a href="#">电影</a>
    <a href="#">电视剧</a>
    <a href="#">纪录片</a>
    <a href="#">综艺</a>
    <a href="#">儿童</a>
    <a href="#">成人</a>
    <a href="#">其他</a>
    <a href="#">全部</a>
    <a href="#">音乐</a>
    <a href="#">体育活动</a>
    <a href="#">知识</a>
    <a href="#">其他</a>
    <a href="#">全部</a>
    <a href="#">其他</a>
    <a href="#">全部</a>
    <a href="#">其他</a>
    <a href="#">全部</a>
    <a href="#">其他</a>
    <a href="#">全部</a>
    <a href="#">其他</a>
  </div>
</body>

1.4 auto fil自动填充完成响应式效果

【1】各种函数

【2】响应式效果

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 整体布局要求 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      max-width: 1350px;
      margin: 30px auto;
      gap: 18px;
    }

    .box video {
      width: 100%;
      height: 100%;
      /* 圆角 */
      border-radius: 18px;
    }
  </style>
</head>

<body>
  <div class="box">
    <video src="../images/china.mp4"></video>
    <video src="../images/china.mp4"></video>
    <video src="../images/china.mp4"></video>
    <video src="../images/china.mp4"></video>
    <video src="../images/china.mp4"></video>
    <video src="../images/china.mp4"></video>
    <video src="../images/china.mp4"></video>
    <video src="../images/china.mp4"></video>

  </div>
</body>

1.5 网格线

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 整体布局要求 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box {
      /* 网格布局 */
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      max-width: 1200px;
      margin: 100px auto;
      /* 边框 */
      border: 1px solid red;
    }

    .box .item {
      height: 120px;
      background-color: pink;
    }

    .box .item:first-child {
      /* 1号线到3号线 */
      /* grid-column: 1/3;
      grid-row: 1/3; */
      /* span 2是跨2个单元格的意思 */
      grid-column: span 2;
      grid-row: span 2;
      height: auto;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>

  </div>
</body>

1.6 网格填充方式

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 整体布局要求 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr 1fr;
      /* 修改网格填充方式 */
      grid-auto-flow: column;
      gap: 10px;
      max-width: 1760px;
      height: 900px;
      margin: 100px auto;
      border-radius: 20px;
    }

    .box .item {
      background-color: pink;
    }

    .box .item:first-child {
      grid-row: 1/3;
    }

    .box .item:nth-child(3) {
      grid-column: 2/4;
      grid-row: 2/3;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>