在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;}
FoobarBarfoo
在这种配置下，由于.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; /* 不再需要手动设置宽度和边距 */}
FoobarBarfoo
解释：
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的子元素。
.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嵌套的混合布局策略，以兼顾整体网格结构和局部元素的灵活排列。
以上就是CSS Grid同一列元素并排显示与自适应布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1601220.html
微信扫一扫 
支付宝扫一扫 
