CSS Grid：仅显示可换行流体高度元素的第一行-html教程-PHP中文网

CSS Grid：仅显示可换行流体高度元素的第一行

聖光之護

发布： 2025-11-17 11:46:26

原创

511人浏览过

CSS Grid：仅显示可换行流体高度元素的第一行

本教程详细阐述如何在css中实现一个特定布局：仅显示一组具有流体高度的、自动换行元素的第一个行，并隐藏后续行。我们将深入探讨为何传统的flexbox布局在此场景下存在局限性，并重点介绍如何利用css grid布局的强大二维控制能力，通过精确配置行模板、自动行高度以及内容包装策略，高效且优雅地解决这一复杂的布局挑战。

理解布局挑战

在响应式设计中，我们经常需要创建能够根据可用空间自动换行的卡片或项目列表。当这些项目的高度是流动的（即内容决定高度），并且我们只希望显示第一行，同时完全隐藏所有后续换行项目时，问题变得复杂。传统的Flexbox布局虽然在处理一维布局（行或列）和项目换行方面非常强大，但它在精确控制多行布局中特定行的可见性方面存在局限性，尤其是在项目高度不固定的情况下。Flexbox主要关注其直接子元素的排列，而对“行”这一概念的二维控制能力较弱。

采用CSS Grid布局解决方案

对于这种需要精确控制二维空间（行和列）的布局需求，CSS Grid布局是更优的选择。Grid布局允许我们定义显式的行和列，并对它们进行单独的尺寸控制，这正是解决“仅显示第一行”问题的关键。

核心思路

定义网格容器： 将父容器设置为display: grid。
创建响应式列： 使用grid-template-columns结合repeat(auto-fit, minmax(..., 1fr))来创建自适应列。
精确控制行高： 这是解决方案的核心。我们将第一行的行高设置为auto，使其根据内容自适应；而将所有后续自动生成的行的行高设置为0，从而实现隐藏效果。
防止内容溢出： 对每个卡片项目设置overflow: hidden，确保即使后续行的内容被压缩到零高度，也不会溢出显示。
处理内边距： 由于后续行的高度被设置为0，直接在卡片上设置padding会导致零高度的行仍然显示出内边距。因此，需要将卡片内容包裹在一个内部div中，并将padding应用到这个内部div上。

示例代码与详细解释

首先，我们来看一下HTML结构的变化。为了正确处理内边距，每个.card内部需要一个额外的div来包裹内容。

<div class="wrapper">
  <div class="card"><div>Lipsum</div></div>
  <div class="card"><div>Longer descriptions</div></div>
  <div class="card"><div>Longer descriptions <br> foobar</div></div>
  <div class="card"><div>Small</div></div>
  <div class="card"><div>Foo</div></div>
  <div class="card"><div>Barr</div></div>
</div>

登录后复制

接下来是关键的CSS样式：

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

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

.wrapper {
  display: grid; /* 启用CSS Grid布局 */
  column-gap: 1rem; /* 定义列之间的间距 */
  /* 定义列模板：自动适应，最小宽度100px，最大宽度1fr（等比例填充剩余空间） */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

  /* 核心：定义第一行的行高为auto，使其根据内容自适应 */
  grid-template-rows: auto;
  /* 核心：定义所有后续自动生成的行的行高为0，从而隐藏它们 */
  grid-auto-rows: 0;

  overflow: auto; /* 允许内容溢出时出现滚动条，用于演示可调整大小 */
  resize: horizontal; /* 允许水平调整容器大小，用于演示响应式行为 */
}

.card {
  background: red; /* 示例背景色 */
  overflow: hidden; /* 隐藏卡片内部溢出的内容，防止零高行中的内容显示 */
}

.card > div {
  padding: 3px; /* 将内边距应用于卡片内部的div，避免影响零高行 */
}

登录后复制

关键属性解析：

display: grid;: 将.wrapper容器转变为一个网格容器，允许其内容按照网格线进行布局。
column-gap: 1rem;: 设置网格列之间的间距。
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));: 这是一个强大的响应式列定义。
- repeat(): 重复函数。
- auto-fit: 尽可能多地填充列，即使没有足够的内容。
- minmax(100px, 1fr): 定义每个列的最小宽度为100px，最大宽度为1fr（表示占据可用空间的一份）。这使得列既能自适应又能保持最小宽度。
grid-template-rows: auto;: 这是关键所在。它显式地定义了第一行的行高为auto，意味着第一行的高度将由其内容决定。
grid-auto-rows: 0;: 同样关键。它定义了所有隐式创建的行（即超出grid-template-rows显式定义的行）的行高为0。这意味着所有换行到第二行及以后的项目都将被分配到一个高度为零的行中，从而被隐藏。
.card { overflow: hidden; }: 确保即使内容被压缩到零高度，也不会有任何文本或元素从卡片边界溢出，从而保持布局的整洁。
.card > div { padding: 3px; }: 将内边距从.card元素本身移动到其内部的div中。如果padding直接应用于.card，即使grid-auto-rows: 0使行高为零，padding仍然可能导致卡片在视觉上占据一定的空间。通过将padding应用于内部div，当外部卡片被赋予零高度时，内部div及其padding也会随之被隐藏。