web排版中的5G技术——grid布局实例演示新属性

grid布局的基本术语,实例演示grid新属性

实例效果：

grid布局

实例源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid布局的基本术语,实例演示grid新属性</title>
    <style>
      /* 初始化 */
      * {
        box-sizing: border-box;
        background-color: lightyellow;
      }
      .container {
        /* 生成网格容器 */
        display: grid;
        /* 生成网格模板/轨道 */
        /* 显式网格单元 10em三列 */
        grid-template-columns: 10em 10em 10em;
        /* 5em两行 */
        grid-template-rows: 5em 5em;
        /* 水平间隙1em 垂直间隙2em */
        gap: 1em 2em;
        gap: 1em;
        /* 项目排列方向 */
        /* 行优先： 默认值 */
        grid-auto-flow: row;
        /* 列优先 */
        /* grid-auto-flow: column; */
        /* 隐式网格单元 */
        /* 1. grid-auto-flow: 项目排列方向 */
        /* 2. grid-auto-rows / columns: 隐式网格单元的行高 / 列宽  */
        /* 容器根据项目数量自动生成的网格单元: 隐式网格单元  */
        /* item5, item6放置在之前生成的6个单元格中 */
        /* item7, item8放置在容器自动生成的一行 */
        grid-auto-rows: auto;
        grid-auto-rows: min-content;
        grid-auto-rows: 8em;
        grid-auto-rows: minmax(8em, auto);
        /* grid-auto-columns: 22em; */
      }
      .container > .item {
        /* 网格项目  */
        background-color: yellow;
        width: 6em;
        height: 2em;
        border: 1px solid chocolate;
      }
    </style>
  </head>
  <body>
    <!-- 一、grid布局的基本术语 -->
    <!-- 网格容器：display: grid，网格布局是一个二维的布局，网格容器是决定将网格分为几行几列 -->
    <!-- 网格项目：网格容器的子元素，display：grid下的子元素称为网格项 -->
    <!-- 网格单元：两个相邻的列网格线和两个相邻的行网格线组成的是网格单元，显式网格单元，隐式网格单元 -->
    <!-- 网络区域：grid area，四个网格线包围的总空间-->
    <!-- 网格轨道：是相邻两条平行的网格线之间的部分grid-template-columns/grid-template-rows -->
    <!-- 轨道间隙：gap是相邻两条平行的网格线之间的部分，gap: 水平间隙 垂直间隙 */ -->
    <!-- 二、实例演示grid新属性 -->
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
      <div class="item">item4</div>
      <div class="item">item5</div>
      <div class="item">item6</div>
      <div class="item">item7</div>
      <div class="item">item8</div>
    </div>
  </body>
</html>

案例总结：

一、grid布局的基本术语：

网格容器：display: grid，网格布局是一个二维的布局，网格容器是决定将网格分为几行几列
网格项目：网格容器的子元素，display：grid下的子元素称为网格项 —>
网格单元：两个相邻的列网格线和两个相邻的行网格线组成的是网格单元，显式网格单元，隐式网格单元
网络区域：grid area，四个网格线包围的总空间
网格轨道：是相邻两条平行的网格线之间的部分grid-template-columns/grid-template-rows
轨道间隙：gap是相邻两条平行的网格线之间的部分，gap: 水平间隙垂直间隙

二、grid常用属性：

生成网格容器：display: grid
生成网格模板/轨道：grid-template-columns / grid-template-rows
单元间隙：gap
项目排列方向：grid-auto-flow: row / grid-auto-flow: column
网格单元设置大小：grid-auto-rows / grid-auto-columns:

实例效果：

实例源码：

案例总结：

一、grid布局的基本术语：

二、grid常用属性：

相关文章