CSS Grid同一列元素并排显示与自适应布局

在CSS Grid布局中，当多个子元素被分配到相同的网格列或存在重叠的网格行区域时，它们默认的行为是堆叠或相互覆盖。这与期望它们并排显示并自动调整大小的需求产生了冲突。例如，在一个时间表视图中，如果多个事件都位于同一天的列中，我们可能希望它们在视觉上并排呈现，而不是简单地堆叠在一起。

理解问题：CSS Grid的默认行为

考虑以下CSS Grid设置，其中.grid容器定义了行和列，而.entry-one和.entry-two都被分配到相同的col列，但它们的行跨度有所不同或重叠：

.grid {
  display: grid;
  grid-template-rows: [row-a] 1fr [row-b] 1fr [row-c] 1fr [row-d] 1fr;
  grid-template-columns: [col] 1fr;
  flex-grow: 1; /* 注意：此属性在display: grid下效果有限 */
}

.entry-one {
  grid-column: col;
  grid-row: row-a/row-d; /* 跨越多行 */
  background-color: red;
}

.entry-two {
  grid-column: col;
  grid-row: row-b; /* 位于entry-one的内部 */
  background-color: green;
}

  
    Foobar
  
  
    Barfoo
  

在这种配置下，由于.entry-one和.entry-two都被放置在col列中，并且它们的行区域存在重叠（entry-two的row-b完全包含在entry-one的row-a/row-d内），它们将默认堆叠在一起，导致.entry-two可能被.entry-one覆盖。

为了解决这个问题，一种常见的临时方案是手动设置元素的width和margin-left，使其强行并排：

.entry-one {
  grid-column: col;
  grid-row: row-a/row-d;
  background-color: red;
  width: 50%; /* 手动设置宽度 */
}

.entry-two {
  grid-column: col;
  grid-row: row-b;
  background-color: green;
  width: 50%; /* 手动设置宽度 */
  margin-left: 50%; /* 手动设置偏移 */
}

然而，这种方法不够灵活，尤其当元素数量动态变化时，需要复杂的JavaScript计算来调整宽度和边距，维护成本高昂。

解决方案：利用Flexbox实现并排布局

要实现元素的自动并排和自适应布局，我们可以巧妙地利用Flexbox的强大能力。关键在于将包含这些元素的父容器的display属性从grid更改为flex。

.grid {
  display: flex; /* 关键改变：从grid改为flex */
  /* 以下grid相关的属性在display: flex时将不再生效 */
  grid-template-rows: [row-a] 1fr [row-b] 1fr [row-c] 1fr [row-d] 1fr;
  grid-template-columns: [col] 1fr;
  flex-grow: 1;
}

.entry-one {
  /* 当父容器是flex时，这些grid属性将不再生效 */
  grid-column: col;
  grid-row: row-a/row-d;
  background-color: red;
  /* 不再需要手动设置宽度和边距 */
}

.entry-two {
  /* 当父容器是flex时，这些grid属性将不再生效 */
  grid-column: col;
  grid-row: row-b;
  background-color: green;
  /* 不再需要手动设置宽度和边距 */
}

  
    Foobar
  
  
    Barfoo
  

解释：

1. display: flex on .grid: 当我们将.grid容器的display属性设置为flex时，它就变成了一个Flex容器。它的直接子元素（.entry-one和.entry-two）随即成为Flex项目。
2. Flexbox默认行为: Flex容器默认的flex-direction是row，这意味着Flex项目会沿着主轴（水平方向）并排排列。同时，它们会根据可用空间自动调整大小。
3. Grid属性失效: 需要注意的是，一旦.grid成为Flex容器，其上定义的grid-template-rows和grid-template-columns属性将不再对它的直接子元素产生布局影响。同样，子元素上的grid-column和grid-row属性也会失效。这意味着我们实际上是放弃了.grid容器作为网格容器的功能，转而利用Flexbox的布局能力来处理其内部元素的排列。

通过这种方式，entry-one和entry-two将自动并排显示，并根据父容器的宽度自适应调整，无需任何手动计算。

注意事项与进阶考虑

• 布局模型切换: 这种方法的核心是切换了父容器的布局模型。如果您的整体页面布局严重依赖CSS Grid，并且需要.grid容器同时作为网格容器来布局其子元素（例如，某些子元素需要精确地放置在网格的特定单元格中，而另一些则需要并排），那么直接将.grid设置为display: flex可能不是最佳选择。
• Grid与Flexbox的结合: 在更复杂的场景中，如果需要同时保持Grid的整体结构和Flexbox的局部并排能力，可以采用嵌套布局。例如，您可以让.grid容器保持display: grid，然后在需要并排元素的特定网格单元格内，放置一个额外的div作为Flex容器，将需要并排的元素作为这个div的子元素。

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .grid-cell-for-flex {
    grid-column: 1; /* 放置在网格的第一列 */
    display: flex; /* 内部元素并排 */
    gap: 10px; /* 增加间距 */
  }
  .flex-item-one, .flex-item-two {
    flex: 1; /* 让它们平分可用空间 */
    background-color: lightblue;
    padding: 10px;
  }

  这种方式允许您在保持整体网格布局的同时，局部地利用Flexbox进行精细的元素排列。

• Flexbox属性的进一步控制: 一旦父容器成为Flex容器，您可以使用各种Flexbox属性来进一步控制子元素的排列和对齐，例如：
  • justify-content: 控制主轴上的对齐方式（space-around, space-between, center等）。
  • align-items: 控制交叉轴上的对齐方式（flex-start, center, stretch等）。
  • flex-wrap: 控制Flex项目是否换行（wrap, nowrap）。
  • gap: 控制Flex项目之间的间距。

总结

当面临CSS Grid中同一列元素需要并排显示并自动适应布局的需求时，将包含这些元素的父容器的display属性从grid更改为flex是一种直接且高效的解决方案。这种方法利用了Flexbox的单轴布局优势，实现了元素的自动排列和自适应。然而，理解这种改变对原有Grid布局的影响至关重要，并在必要时考虑采用Grid与Flexbox嵌套的混合布局策略，以兼顾整体网格结构和局部元素的灵活排列。