CSS Grid与Flexbox协同：在同一网格列中实现元素自适应并排布局

本教程详细阐述了如何在css grid布局中，将多个元素放置于同一网格列内并使其自动调整大小、并排显示。通过引入一个中间容器，并巧妙结合css grid的定位能力与flexbox的弹性布局特性，我们可以实现动态、响应式的子布局，避免了手动设置固定宽度和边距的局限性，从而构建出更灵活、更易维护的界面结构，尤其适用于时间表等复杂布局场景。

在构建复杂的网页布局时，CSS Grid提供了一个强大的二维布局系统。然而，当我们需要在Grid布局的单个网格单元（或跨越多个行的单一列）内部，实现多个元素的水平并排、自适应布局时，直接将这些元素都定位到同一grid-column会导致它们重叠。本教程将深入探讨如何优雅地解决这一问题，通过结合CSS Grid和Flexbox的优势，实现元素的动态并排显示。

理解挑战：网格重叠与非弹性布局

考虑一个典型的场景：您正在构建一个时间表视图，其中包含多行多列的网格。在某一列中，您希望显示两个或更多事件，并且这些事件能够自动并排占据该列的空间，而不是堆叠在一起。原始的尝试可能如下：

.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; /* 此属性在Grid容器上通常不直接影响其内部布局，更多用于Flex父项 */
}

.entry-one {
  grid-column: col;
  grid-row: row-a/row-d;
  background-color: red;
}

.entry-two {
  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>

在这种情况下，.entry-one和.entry-two都定位在名为col的网格列中。CSS Grid的默认行为是让它们在同一网格单元内重叠。虽然可以通过手动设置width: 50%;和margin-left: 50%;来模拟并排效果，但这并非动态和响应式的解决方案，尤其当内容或元素数量变化时，维护成本高昂。

核心策略：网格与Flexbox的嵌套融合

解决此问题的关键在于引入一个中间容器。这个容器将作为CSS Grid的一个子项，占据所需的网格列（和行），然后将需要并排显示的元素作为这个中间容器的子项。最重要的是，这个中间容器本身被设置为一个Flex容器，使其子元素能够弹性地并排布局。

Gridster.js多列网格式拖动布局插件

网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件

74

查看详情

立即学习“前端免费学习笔记（深入）”；

示例代码：

<div class='grid'>
  <!-- 中间容器作为实际的网格项 -->
  <div class='grid-column-wrapper'>
    <div class='entry-one'>Foobar</div>
    <div class='entry-two'>Barfoo</div>
  </div>
</div>

/* 主网格容器定义 */
.grid {
  display: grid;
  grid-template-rows: [row-a] 1fr [row-b] 1fr [row-c] 1fr [row-d] 1fr;
  grid-template-columns: [col] 1fr;
  min-height: 200px; /* 示例：确保网格有高度 */
  border: 1px solid #ccc;
}

/* 中间容器：作为网格项，并成为Flex容器 */
.grid-column-wrapper {
  grid-column: col; /* 定位到目标网格列 */
  grid-row: row-a / row-d; /* 跨越所需的网格行 */
  display: flex; /* 关键：使其子元素弹性并排 */
  /* 默认 flex-direction: row; 使子元素水平排列 */
  /* flex-wrap: wrap; 如果子元素过多需要换行 */
  background-color: #f0f0f0; /* 示例背景 */
  padding: 5px;
}

/* 内部元素：作为Flex项，自适应占据空间 */
.entry-one,
.entry-two {
  flex: 1; /* 每个子元素占据等宽空间 */
  /* flex-grow: 1; flex-shrink: 1; flex-basis: 0; 的简写 */
  /* 如果需要不同比例，可以设置 flex: 2; flex: 1; */
  padding: 10px;
  border: 1px solid #333;
  box-sizing: border-box; /* 边框和内边距包含在宽度内 */
  text-align: center;
}

.entry-one {
  background-color: red;
  color: white;
}

.entry-two {
  background-color: green;
  color: white;
}

详细解析

1. grid容器 (.grid): 保持display: grid不变，它负责定义整体的二维布局结构，包括行和列的模板。这是构建时间表等复杂布局的基础。
2. 中间容器 (.grid-column-wrapper):
   • 它被视为一个普通的网格子项，通过grid-column: col;和grid-row: row-a / row-d;精确地定位到网格中的特定区域。
   • 最关键的是，它被设置为display: flex;。这使得它内部的子元素（.entry-one和.entry-two）变成了Flex项。
   • flex-direction默认为row，确保子元素水平排列。
3. 内部元素 (.entry-one, .entry-two):
   • 作为Flex项，它们不再直接受Grid布局的定位影响。
   • flex: 1; 是一个非常强大的简写属性，等同于flex-grow: 1; flex-shrink: 1; flex-basis: 0%;。这意味着它们将：
     • flex-grow: 1;：在有剩余空间时，等比例地增长以占据所有可用空间。
     • flex-shrink: 1;：在空间不足时，等比例地缩小。
     • flex-basis: 0%;：在计算空间分配前，它们的初始尺寸被视为0。
   • 通过这种方式，无论.grid-column-wrapper的宽度如何，其内部的.entry-one和.entry-two都会自动调整大小，并平均分配水平空间。

注意事项与最佳实践

• 避免混淆 display: grid 和 display: flex: 原始问题中提供的答案将主网格容器从display: grid修改为display: flex。这会彻底改变整个布局机制，使其不再是Grid布局，而是Flexbox布局。虽然Flexbox在某些一维布局场景中非常强大，但对于需要明确的行和列结构（如时间表）的二维布局，Grid是更合适的选择。正确的做法是在Grid内部的特定区域使用Flexbox进行局部布局。
• 动态内容与响应式: 这种嵌套方法天生具有响应性。当.grid-column-wrapper的宽度变化时，其内部的Flex项会自动调整。对于动态添加或移除的元素，只需将它们作为.grid-column-wrapper的子项，它们就会自动参与Flex布局的

以上就是CSS Grid与Flexbox协同：在同一网格列中实现元素自适应并排布局的详细内容，更多请关注php中文网其它相关文章！