在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;
}<div class='grid'>
<div class='entry-one'>
Foobar
</div>
<div class='entry-two'>
Barfoo
</div>
</div>在这种配置下，由于.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;
/* 不再需要手动设置宽度和边距 */
}<div class='grid'>
<div class='entry-one'>
Foobar
</div>
<div class='entry-two'>
Barfoo
</div>
</div>解释：
- display: flex on .grid: 当我们将.grid容器的display属性设置为flex时，它就变成了一个Flex容器。它的直接子元素（.entry-one和.entry-two）随即成为Flex项目。
- Flexbox默认行为: Flex容器默认的flex-direction是row，这意味着Flex项目会沿着主轴（水平方向）并排排列。同时，它们会根据可用空间自动调整大小。
- 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的子元素。
<div class="grid-container"> <div class="grid-cell-for-flex"> <!-- 这个div是grid item，但它内部是flex容器 --> <div class="flex-item-one"></div> <div class="flex-item-two"></div> </div> <!-- 其他grid items --> </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嵌套的混合布局策略，以兼顾整体网格结构和局部元素的灵活排列。
