display:grid

display：grid是怎么用

display: grid; 是 CSS 中的一个属性值，用于创建一个二维布局系统，允许你通过行和列来组织页面上的元素。以下是如何使用 display: grid; 的基本步骤：

1. 设置容器

首先，你需要选择一个容器元素，并将其 display 属性设置为 grid 或 inline-grid。grid 会使容器占据整个宽度，而 inline-grid 会使容器仅占据必要的宽度。

1
2
3

.container {
  display: grid;
}

2. 定义网格模板

接下来，你需要定义网格的行和列。这可以通过 grid-template-columns 和 grid-template-rows 属性来完成。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 定义三列，每列宽度为100px */
  grid-template-rows: 50px 50px; /* 定义两行，每行高度为50px */
}

3. 放置子元素

现在，你可以将子元素放置在网格中。你可以使用 grid-column 和 grid-row 属性来指定子元素的位置。

.item1 {
  grid-column: 1 / 3; /* 从第一列开始，到第三列结束 */
  grid-row: 1; /* 在第一行 */
}

.item2 {
  grid-column: 2 / 4; /* 从第二列开始，到第四列结束 */
  grid-row: 2; /* 在第二行 */
}

4. 完整示例

以下是一个完整的示例，展示了如何使用 display: grid; 创建一个简单的网格布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 50px 50px;
      gap: 10px; /* 设置网格之间的间距 */
    }

    .item {
      background-color: lightblue;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
  </div>
</body>
</html>

在这个示例中，我们创建了一个包含四个子元素的网格布局。每个子元素都有一个类名为 item，并且通过 grid-column 和 grid-row 属性放置在网格中的特定位置。

5. 更多属性

除了基本的 grid-template-columns 和 grid-template-rows 属性外，CSS Grid 还提供了许多其他属性来控制网格的布局和样式，例如：

grid-column-gap 和 grid-row-gap：设置列和行之间的间距。
gap：设置列和行之间的间距（简写属性）。
grid-template-areas：通过命名区域来定义网格布局。
grid-auto-columns 和 grid-auto-rows：定义自动生成的列和行的大小。
justify-items 和 align-items：控制子元素在网格单元格中的对齐方式。
justify-self 和 align-self：控制单个子元素在网格单元格中的对齐方式。

通过这些属性，你可以创建出非常复杂和灵活的网格布局。

详细解释参数

grid-template-columns: 1fr 1fr; 是 CSS Grid 布局中用于定义列宽的一种方式。这里的 fr 是 “fraction”（分数）的缩写，表示将容器可用空间划分为等份，每一份称为一个 fr 单位。

在这个例子中：

grid-template-columns: 1fr 1fr; 表示将容器的宽度分为两份相等的部分。
第一个 1fr 表示第一列占据容器宽度的 1/2。
第二个 1fr 表示第二列也占据容器宽度的 1/2。

因此，这种设置会使得两列各占容器宽度的一半，无论容器的实际宽度是多少。

示例

假设你有一个容器，其宽度为 600px：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

在这种情况下，第一列和第二列各占 300px（即 600px 的一半）。

其他用法

你还可以使用 fr 单位来创建不等宽的列：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 第一列占 1/3，第二列占 2/3 */
}

在这个例子中，第一列占据容器宽度的 1/3，而第二列占据容器宽度的 2/3。

总结

grid-template-columns: 1fr 1fr; 表示将容器的宽度分为两份相等的部分，每一列各占一半。这种设置非常适合创建等宽的列布局。

如果想要实现自适应怎么办

在使用display: grid的布局中实现多列自适应通常涉及到设置grid-template-columns属性为一个或多个响应式单位，如百分比、fr单位（等分剩余空间）或auto-fit/minmax()函数。以下是一些实现多列自适应的方法：

使用百分比

通过将grid-template-columns设置为百分比，可以让列根据容器的宽度自适应。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

在这个例子中，repeat(auto-fit, minmax(200px, 1fr))表示创建多个列，每列的最小宽度为200px，最大宽度为等分剩余空间（1fr）。auto-fit会根据容器的宽度自动调整列的数量。

使用`fr`单位

fr单位代表网格容器中的剩余空间份数。通过设置grid-template-columns为1fr，可以让列等分剩余空间。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

在这个例子中，minmax(200px, 1fr)确保每列至少有200px宽，并且会等分剩余空间。

使用`auto-fit`和`minmax()`

auto-fit和minmax()函数结合使用可以创建自适应的列布局。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

在这个例子中，auto-fit会根据容器的宽度自动调整列的数量，而minmax(200px, 1fr)确保每列至少有200px宽，并且会等分剩余空间。

使用媒体查询

你也可以使用媒体查询来根据不同的屏幕尺寸设置不同的列数。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

@media (min-width: 600px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

在这个例子中，当屏幕宽度大于等于600px时，列数变为2；当屏幕宽度大于等于900px时，列数变为3。

通过这些方法，你可以实现多列自适应的display: grid布局。

JavaScript

展开运算符

展开运算符（Spread Operator）是 JavaScript 中的一个语法特性，用于将可迭代对象（如数组、对象等）展开为单个元素或属性。它在 ES6（ECMAScript 2015）中被引入，极大地简化了代码书写，提高了开发效率。

展开运算符的基本语法

对于数组：使用 ... 将数组元素展开。
对于对象：使用 ... 将对象的属性展开。

展开运算符的用途

1. 在数组中使用展开运算符

合并数组

1
2
3

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

复制数组

1 2	const original = [1, 2, 3]; const copy = [...original]; // [1, 2, 3]

在函数调用中使用

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum(...numbers); // 6

2. 在对象中使用展开运算符

合并对象

1
2
3

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }

复制对象

1 2	const original = { a: 1, b: 2 }; const copy = { ...original }; // { a: 1, b: 2 }