由 row-gap 想到的 ...今天早上，我正在愉快的写代码，直到我突然看到了 row-gap: 10px;。我有点

今天早上，我正在愉快的写代码，直到我突然看到了 row-gap: 10px;。

我有点错愕，这个 CSS 属性看起来有点面生啊。

然后我就去查资料了，不查不知道，一查简直吓一跳。我对 grid 布局已经生疏到如此了吗？

1. grid 布局

于是赶紧恶补一下。

CSS中的row-gap属性用于定义在具有grid或inline-grid显示类型的元素的行之间插入的间隙大小。这个属性是CSS Grid Layout的一部分，它允许开发者在网页布局中使用网格系统。以 row-gap 属性为例：

属性名称：row-gap
属性值：可以是任何有效的长度值（如px, em, rem, vh等），百分比，或者normal（默认值，表示行间距正常，通常为0）。
适用元素：row-gap属性只适用于具有display: grid或display: inline-grid的元素。
作用：它定义了网格容器中行与行之间的垂直间隙。

语法：

.grid-container {
  display: grid;
  row-gap: 20px; /* 行间距为20像素 */
}

简写形式：gap属性是row-gap和column-gap的简写形式，可以同时设置行间距和列间距。如果只设置row-gap，则列间距将默认为0。
兼容性：row-gap属性在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能不受支持。

举例：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三列 */
  row-gap: 10px; /* 设置行间距为10像素 */
  column-gap: 10px; /* 设置列间距为10像素 */
}

作用：通过使用row-gap属性，开发者可以更灵活地控制网格布局中的行间距，从而创建更加美观和响应式的网页布局。

2. 与 flex 布局的差异

恶补完毕。对于这件事简直细思恐极。如果我看到的是 flex-shrink 这种也是比较不常见的属性，那我会立马反应上来，这是用在 flex 布局中调节主方向上的位置的。那么为什么对于 row-gap 大脑没有一点点反应呢。

想来想去，只有四个字：用的太少。

用的太少，是有原因的。原因也很简单，因为一般布局用 flex 就足够了，很少想到要去用下 grid 。久而久之自然就生疏了。

那这两种布局有什么区别呢，所谓存在即合理么，grid 存在于 flex 之外的意义又是什么呢？

其实，CSS Grid布局和Flex布局都是现代网页设计中用于创建灵活和响应式布局的强大工具。它们各自有独特的优势和用途，但在某些场景下，Grid布局提供了一些Flex布局不具备的特性：

二维布局：
- Grid布局是为二维布局设计的，这意味着它可以同时控制元素的行和列。这使得Grid非常适合创建复杂的网格状布局，如分栏布局、复杂的表格布局等。
- Flex布局主要用于一维布局，无论是水平（行）还是垂直（列），Flex布局更擅长控制元素在同一方向上的对齐和分布。
网格线：
- Grid布局允许开发者使用网格线来放置元素，这使得对齐和分布更加直观和灵活。你可以指定元素相对于网格线的开始和结束位置。
- Flex布局没有网格线的概念，元素的对齐和分布依赖于容器的主轴和交叉轴。
轨道大小：
- 在Grid布局中，轨道（行和列）的大小可以是固定的、基于比例的，或者根据内容自动调整。这为创建灵活的网格提供了更多的控制。
- Flex布局中的项目大小通常由内容决定，或者可以通过设置flex-grow、flex-shrink和flex-basis属性来控制。
区域（Areas）：
- Grid布局允许你定义多个网格区域（grid areas），这些区域可以跨越多行多列，非常适合创建不规则的布局或将多个元素组合在一起。
- Flex布局不支持跨越多行或多列的区域。
间隙（Gaps）：
- Grid布局提供了row-gap和column-gap属性，可以轻松地在网格行和列之间添加间隙。
- Flex布局没有直接等价的间隙属性，虽然可以使用gap属性，但它在Flex布局中的支持不如Grid布局中那么普遍。
对齐和分布：
- Grid布局提供了更丰富的对齐和分布选项，如align-items、justify-items和place-items，可以在行和列方向上对齐网格项。
- Flex布局的对齐和分布主要依赖于align-items、justify-content和align-content属性，这些属性主要针对主轴和交叉轴。
响应式设计：
- Grid布局的响应式设计能力非常强大，可以使用媒体查询和网格函数（如fr、minmax()等）来创建适应不同屏幕尺寸的布局。
- Flex布局也非常灵活，可以通过媒体查询和flex属性来调整布局，但在创建复杂的响应式网格时可能不如Grid布局直观。
浏览器支持：
- 随着时间的推移，大多数现代浏览器都对Grid和Flex布局提供了良好的支持。然而，Grid布局相对较新，可能在一些旧版本的浏览器中支持不如Flex布局。

总的来说，Grid布局在创建复杂的二维布局、控制网格线和轨道大小、定义多个网格区域等方面具有优势。而Flex布局则在创建一维布局、控制元素对齐和分布、以及与内联布局的兼容性方面表现出色。在实际的网页设计中，根据具体的需求和目标，开发者可能会同时使用这两种布局方式。

我相信在不考虑兼容性的情况下，对于比较复杂的页面布置，grid 是更胜一筹的。

3. grid 布局适用场景

那么在生么情况下，grid 布局更加适合呢，下面列举了一些场景及其实现代码。

多列等宽布局：使用Grid可以很容易地创建多列等宽的布局，而使用Flex布局则需要为每一列单独设置宽度。
```
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三列，等宽 */
}
```

不规则网格布局： Grid布局允许跨越多行多列的网格区域，这在Flex布局中实现起来比较困难。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

网格内元素对齐： Grid布局提供了丰富的对齐选项，可以在网格行和列方向上对齐网格项。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center; /* 垂直居中对齐网格项 */
  justify-items: center; /* 水平居中对齐网格项 */
}

响应式网格布局：使用Grid布局，可以很容易地创建响应式布局，通过媒体查询调整网格的行和列。

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

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 在小屏幕上改为两列 */
  }
}

网格线对齐： Grid布局允许元素基于网格线进行定位，这在Flex布局中不容易实现。

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
}

.first-item {
  grid-column: 2 / 3; /* 跨越第二列和第三列的网格线 */
}

.second-item {
  grid-column: 1 / -1; /* 从第一列的起始线到倒数第一列的结束线 */
}

嵌套网格： Grid布局可以很容易地嵌套，即在一个网格容器内部再创建另一个网格容器。

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

.nested-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

网格内空白区域： Grid布局允许在网格行和列之间添加间隙，这是Flex布局中不容易实现的。

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 20px; /* 行间距 */
  column-gap: 20px; /* 列间距 */
}

这些例子展示了Grid布局在创建复杂布局时的优势，包括多列等宽布局、不规则网格布局、网格内元素对齐、响应式设计、基于网格线的定位、嵌套网格以及在网格中添加间隙等。相比之下，使用Flex布局来实现这些布局可能会更加复杂和困难。

4. `grid`和`inline-grid`

grid和inline-grid都是用于创建网格布局的显示类型，但它们之间还是存在一些关键的区别的，表现在：

布局方向：
- grid：创建一个块级网格布局。网格容器是一个块级容器，其子元素（网格项）也是块级元素，会占据整行或整列。
- inline-grid：创建一个内联级网格布局。网格容器是一个内联块级容器，其子元素可以是内联元素，允许多个网格容器在同一行内排列。
子元素的排列：
- grid：网格项默认独占一行或一列，即使它们的内容不足以填满整个空间。
- inline-grid：网格项可以在同一行内并排显示，类似于文本或其他内联元素。
对齐和分布：
- grid：由于网格项占据整个网格轨道，因此对齐和分布通常在网格轨道级别上进行。
- inline-grid：对齐和分布可以在网格项内部进行，因为它们可以并排显示。
容器尺寸：
- grid：网格容器的宽度和高度由其子元素或外部元素决定，或者可以通过CSS指定。
- inline-grid：网格容器的宽度通常由其子元素决定，高度则由内部内容决定。它可以随着内容的流动而伸缩。
与其他布局方式的交互：
- grid：作为一个块级容器，grid容器与其他块级元素一样，可以很容易地与其他布局方式（如flexbox）结合使用。
- inline-grid：作为一个内联块级容器，inline-grid可以与其他内联元素（如文本、图片等）一起使用，但与其他块级布局方式的交互可能需要额外的考虑。
使用场景：
- grid：适用于创建大型布局结构，如页面布局、多行多列的网格布局等。
- inline-grid：适用于创建小型布局结构，如内联的图标和文本、水平排列的导航菜单等。

示例：

/* grid 示例 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三列，等宽 */
}

/* inline-grid 示例 */
.inline-grid-container {
  display: inline-grid;
  grid-template-columns: repeat(3, auto); /* 创建三列，宽度由内容决定 */
}

选择使用grid还是inline-grid取决于布局需求和设计目标。grid提供了更强大的布局控制能力，适合复杂的页面布局；而inline-grid则更适合创建内联的、响应式的小型布局。

由 row-gap 想到的 ...

1. grid 布局

2. 与 flex 布局的差异

3. grid 布局适用场景

4. grid和inline-grid

4. `grid`和`inline-grid`