引用：

  1. CSS 网格容器 | 菜鸟教程

notes
  1. 网格是一组相交的水平线和垂直线，它定义了网格的列和行。
  2. CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。
  3. 网格布局由一个父元素及一个或多个子元素组成。
  4. 当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。
  5. 我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。
  6. 这些属性定义了网格的轨道，一个网格轨道就是网格中任意两条线之间的空间。
  7. grid-template-columns 定义列数
  8. grid-template-rows 定义每一行的高度
  9. 轨道可以使用任何长度单位进行定义。
  10. 网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。
  11. 一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。
  12. 一旦一个网格元素被定义在一个父级元素当中，那么他的子级元素将会排列在每个事先定义好的网格单元中。
  13. 网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。
  14. 网格区域的形状应该是一个矩形 - 也就是说你不可能创建出一个类似于”L”形的网格区域。
  15. 网格元素的垂直线方向称为列（Column）
  16. 网格元素的水平线方向称为行（Row）
  17. 网格间距（Gap）指的是两个网格单元之间的网格横向间距（Column Gap）或网格纵向间距（Row Gap）
  18. 调整间隙大小
    1. grid-column-gap
    2. grid-row-gap
    3. grid-gap
  19. 列与列，行与行之间的交接处就是网格线。
  20. 使用网格线
    1. grid-column-start
    2. grid-column-end
    3. grid-row-start
    4. grid-row-end

demo 数字输入框

练习 grid 布局

image.png

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>test 数字输入框</title>
  7.   <link rel="stylesheet" href="./index.css">
  8. </head>
  10. <body>
  12.   <input type="text" id="numberInput">
  14.   <div class="grid-container" id="grid">
  15.     <div class="btn num1">1</div>
  16.     <div class="btn num2">2</div>
  17.     <div class="btn num3">3</div>
  18.     <div class="btn clear">清空</div>
  19.     <div class="btn num4">4</div>
  20.     <div class="btn num5">5</div>
  21.     <div class="btn num6">6</div>
  22.     <div class="btn cancel">取消</div>
  23.     <div class="btn num7">7</div>
  24.     <div class="btn num8">8</div>
  25.     <div class="btn num9">9</div>
  26.     <div class="btn confirm">确定</div>
  27.     <div class="btn num0">0</div>
  28.     <div class="btn backspace">退格</div>
  29.   </div>
  31.   <script>
  32.     const input = document.getElementById("numberInput");
  33.     const grid = document.getElementById("grid");
  35.     grid.addEventListener("click", function (e) {
  36.       input.focus()
  37.       const target = e.target;
  38.       const currentVal = input.value;
  40.       if (target.classList.contains("btn")) {
  41.         if (target.classList.contains("num1") || target.classList.contains("num2") ||
  42.             target.classList.contains("num3") || target.classList.contains("num4") ||
  43.             target.classList.contains("num5") || target.classList.contains("num6") ||
  44.             target.classList.contains("num7") || target.classList.contains("num8") ||
  45.             target.classList.contains("num9") || target.classList.contains("num0")) {
  46.           // 添加数字到输入框
  47.           input.value = currentVal + target.textContent;
  48.         } else if (target.classList.contains("clear")) {
  49.           // 清空输入框
  50.           input.value = "";
  51.         } else if (target.classList.contains("backspace")) {
  52.           // 删除最后一个字符
  53.           input.value = currentVal.slice(0, -1);
  54.         } else if (target.classList.contains("cancel")) {
  55.           // 按需进行其他操作，例如关闭数字键盘
  56.         } else if (target.classList.contains("confirm")) {
  57.           // 按需进行其他操作，例如提交表单
  58.         }
  59.       }
  60.     });
  61.   </script>
  63. </body>
  65. </html>
  1. .grid-container {
  2.   display: inline-grid;
  3.   grid-template-columns: 100px 100px 100px 100px;
  4.   grid-template-rows: 100px 100px 100px 100px;
  5.   grid-gap: 10px;
  6.   background-color: rgba(0, 0, 0, .2);
  7.   padding: 10px;
  9.   .btn {
  10.     background-color: #eee;
  11.     text-align: center;
  12.     font-size: 30px;
  13.     text-align: center;
  14.     line-height: 100px;
  15.     border-radius: 15px;
  16.     cursor: pointer;
  17.   }
  19.   .confirm {
  20.     grid-area: 3 / 4 / 5 / 4;
  21.     line-height: 200px;
  22.   }
  24.   .confirm {
  25.     color: #fff;
  26.     background-color: #f40;
  27.   }
  29.   .cancel {
  30.     color: #fff;
  31.     background: gray;
  32.   }
  34.   .num0 {
  35.     grid-area: 4 / 1 / 4 / 3;
  36.   }
  37. }

image.png