CSSGrid中baseline与stretch的区别详解

、 等）。效果：子元素会根据其内容的基线进行对齐，而不是整个元素的高度。示例：.grid-container { display: grid; align-items: baseline; }说明：如果子元素中有文字，它们的基线会与容器的基线对齐，这样可以让不同高度的文本看起来更整齐。2. stretch作用：拉伸子元素以填满网格单元格的交叉轴空间。默认行为：这是 align-items 的默认值，如果不设置，默认就是 stretch。效果：子元素会尽可能地填充所在网格区域的高度（如果是垂直方向），或者宽度（如果是水平方向）。示例：.grid-container { display: grid; align-items: stretch; }**》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

align-items: stretch 使子元素在交叉轴上拉伸填满区域，适用于统一高度布局；2. align-items: baseline 按文本基线对齐，适合文字内容对齐，容器高度可不同。

在 CSS Grid 布局中，子元素的对齐方式可以通过 align-items 和 justify-items 控制。其中 baseline 和 stretch 是 align-items 的两个常用值，它们在垂直对齐行为上有明显区别。

align-items: stretch（默认行为）

当设置为 stretch 时，Grid 子元素会在交叉轴（通常是垂直方向）上拉伸，填满整个 Grid 区域的高度（减去外边距）。

• 子元素如果没有设定固定高度，会自动扩展到与行高等高。
• 适用于需要统一高度的卡片、按钮组等布局。
• 如果子元素设置了 max-height，则拉伸行为会受限制。

align-items: baseline

使用 baseline 时，Grid 子元素会根据其内部文本的基线（baseline）对齐，常见于文本类内容排版。

• 对齐的是文字底部，而不是容器边缘。
• 通常用于标题、表单控件或按钮中文字对齐的场景。
• 只有当项目包含内联内容（如文字）时效果才明显。
• 多行文本或不同字体大小会影响对齐效果。

实际对比示例

假设有一个两行 Grid 容器，包含两个子元素：

• 一个 div 包含小号文字
• 另一个 div 包含大号加粗标题

使用 stretch 时，两个 div 高度一致并拉满；而使用 baseline 时，它们的文字基线会对齐，但容器高度可能不同。

基本上就这些——stretch 关注容器尺寸填充，baseline 关注内容文本对齐，选择哪个取决于你的设计目标。不复杂但容易忽略细节。

今天关于《CSSGrid中baseline与stretch的区别详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！