网格布局:grid 容器/项目属性

步骤

grid 容器
划分网格单元
将项目放到指定的网格单元

一、创建 grid 容器

.container {
  display: grid;
}

二、划分网格单元

.container {
  display: grid;
  /* 创建三列,每列宽度为10em */
  grid-template-columns: 10em 10em 10em;
  /* 创建三行,每行宽度为10em */
  grid-template-rows: 10em 10em 10em;
  /* repeat(重复次数,重复的值) */
  grid-template-columns: repeat(3, 10em);
  grid-template-rows: repeat(3, 10em);
  /* fr: fraciton缩写, 比例/部分的意思 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  /* 默认项目的排列方式是:行优先 */
  grid-auto-flow: row;
  grid-auto-flow: column;
  /* 新生成的项目,自动放入自动生成的网格项目中,并且与新单元的宽高自适应 */
  grid-auto-rows: 10em;
  /* gap: 行间距 列间距 */
  gap: 5px 10px;
  /* 对齐,容器外必须有剩余空间才能对齐 */
  /* 所有项目在容器中对齐 */
  /* place-content:垂直方式 水平方式; */
  place-content: start start;
  /* 所有剩余空间还可以在项目之间进行分配 */
  place-content: space-between space-around;
  /* place-items:;项目在网格单元中对齐 */
  place-items: start start;
  /* 如果需要设置所有项目在容器中的居中,并且所有项目还在网格单元中也居中 */
  place-content: center;
  place-items: start;
}

三、将项目放到指定的格子中

.container > .item {
  /* 默认情况下项目在左上角开始的第一个网格单元中 */
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
  /* 简化 */
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  /* 可以自定义项目的位置 */
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  /* 一个项目移动的最小偏移量,就是一个网格单元/单元格 */
  /* 所以,如果项目只占据一个单元格,可以省去结束行号 */
  grid-row: 2;
  grid-column: 2;
  /* 网格区域:一个或多个单元格构成,跨越多行或多列 */
  grid-row: 2 / 4;
  grid-column: 2 / 4;
  /* 查找结束的行/列的意义不大,只知道跨了几行几列就行了 */
  /* span关键字:可以指定结束行/列的数量 */
  grid-row: 2 / span 2;
  grid-column: 2 / span 2;
  /* grid-area: 行开始 / 列开始 / 行结束 / 列结束 直接定义网格区域 */
  grid-area: 2 / 2 / span 2 / span 2;
}
.container > .item:nth-of-type {
  /* 设置某个项目的对齐方式 */
  place-self: end;
}

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid</title>
    <style>
      /* 代码初始化 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body .container {
        width: 100%;
        height: 30em;
        border: 1px solid;
        display: grid;
        /* 创建两行五列 */
        grid-template-columns: repeat(5, 15em);
        grid-template-rows: repeat(2, 15em);
        /* 项目在项目中居中和网格单元中居中 */
        place-content: center;
        place-items: stretch;
      }
      body .container > .item {
        width: 13em;
        height: 12em;
      }
      body .container > .item > img {
        border-radius: 6px 6px 0 0;
        width: 100%;
      }
      body .container > .item > span {
        font-size: 14px;
      }
      body .container > .item > span:hover {
        color: red;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">
        <img src="img/6274cc6ae0efc579.jpg" alt="" />
        <span>PHP开发微信公众号平台从简到精</span>
      </div>
      <div class="item">
        <img src="img/6278b2ec4fa28483.jpg" alt="" />
        <span>PHP进阶教程之由浅入深掌握面向对象开发</span>
      </div>
      <div class="item">
        <img src="img/627a17e380f6e698.jpg" alt="" />
        <span>数据库原理及应用【一套搞定所有数据库面试】</span>
      </div>
      <div class="item">
        <img src="img/627e50fae9f42783.jpg" alt="" />
        <span>极限编程—程序员修炼之道</span>
      </div>
      <div class="item">
        <img src="img/6282079ba5097121.jpg" alt="" />
        <span>PHP上传文件—入门到实战系列必学教程</span>
      </div>
      <div class="item">
        <img src="img/629723b6eb410512.png" alt="" />
        <span>TypeScript全面解读课程</span>
      </div>
      <div class="item">
        <img src="img/629dc8e8356ad204.png" alt="" />
        <span>基于PHP7+MVC博客系统设计</span>
      </div>
      <div class="item">
        <img src="img/62ce7dc353d67580.png" alt="" />
        <span>前端HTML5+CSS3(女神版)</span>
      </div>
      <div class="item">
        <img src="img/62d11714236a0106.png" alt="" />
        <span>CodeIgniter3(CI3)基础教程（全）</span>
      </div>
      <div class="item">
        <img src="img/62d661fa1d3f3690.png" alt="" />
        <span>好课诞生记</span>
      </div>
    </div>
  </body>
</html>