只允许css网格内的行子集自动收缩
基础概念
CSS 网格（Grid）是一种二维布局系统，允许你在行和列中排列元素。网格容器中的行和列可以通过不同的属性进行设置，以实现灵活的布局。grid-template-rows 和 grid-template-columns 属性用于定义网格的行和列的大小。
相关优势
- 灵活性：CSS 网格提供了对行和列的精确控制，使得布局更加灵活。
- 响应式设计：通过媒体查询和相对单位，可以轻松实现响应式设计。
- 易于维护：使用 CSS 网格可以减少 HTML 结构的复杂性，使代码更易于维护。
类型
- 固定大小：使用像素值定义行和列的大小。
- 百分比大小：使用百分比定义行和列的大小，相对于网格容器的大小。
- 最小最大值：使用
minmax()函数定义行和列的最小和最大大小。 - 自动大小：使用
auto关键字，让浏览器根据内容自动调整大小。
应用场景
- 复杂布局：适用于需要精确控制行和列的复杂布局。
- 响应式网页设计：结合媒体查询，可以实现不同屏幕尺寸下的不同布局。
- 仪表盘和仪表板：常用于创建复杂的仪表盘和仪表板布局。
问题描述及解决方案
问题描述
你希望只允许 CSS 网格内的行子集自动收缩，而不是所有行都自动收缩。
原因分析
默认情况下，CSS 网格中的行会根据内容自动调整大小。如果你希望只有特定的行自动收缩，需要对这些行进行特殊设置。
解决方案
可以使用 minmax() 函数结合 auto 关键字来实现这一需求。以下是一个示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-rows: minmax(100px, auto) minmax(auto, auto) minmax(100px, auto);
gap: 10px;
height: 100vh;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Row 1</div>
<div class="grid-item">Row 2 - This row will auto-shrink if necessary</div>
<div class="grid-item">Row 3</div>
</div>
</body>
</html>解释
grid-template-rows: minmax(100px, auto) minmax(auto, auto) minmax(100px, auto);：- 第一行和第三行设置了最小高度为 100px，最大高度为
auto，这意味着它们不会自动收缩到小于 100px。 - 第二行设置了最小高度和最大高度都为
auto，这意味着它会根据内容自动调整大小，可能会收缩到更小的高度。
- 第一行和第三行设置了最小高度为 100px，最大高度为
通过这种方式，你可以精确控制哪些行会自动收缩，哪些行不会。
相关·内容
标题行从其他行继承其高度。如何使表头高度自动缩小？ 我尝试为"group-header“类设置height:CONSTANT，但这不会改变任何内容。我还试图更改"group-header“类的"display”属性，但也不是这样。
浏览 12提问于2018-12-21得票数 0
回答已采纳
是否可以在中设置一个单元格/列的最小宽度？单元格包含一个列表，该列表中的一些项目正在包装，我想防止这种情况发生。NoWrap阻止它们包装，但它们会重叠下一列的内容。
浏览 0提问于2018-11-08得票数 0
回答已采纳
我使用jqGrid 填充我的网格。但是jqGrid只允许在网格内的顶部或底部位置添加一行。我想要做的是能够预先在网格上选择所需的位置(通过在任何现有行中单击)，然后在选定行的上方或下方添加一行。对不起，我的英语很差。提前谢谢。
浏览 1提问于2011-12-08得票数 3
回答已采纳
我已经看过他们的文档和例子很多次了，但我无法让它起作用。我想知道我是否误解了BufferedStore是如何工作的，它与BufferRenderer插件有什么不同。请有人解释一下这两者之间的区别，以及我将使用哪一个来使用oData Rest类使用无限滚动来使用它们。
浏览 1提问于2016-12-03得票数 0
回答已采纳
我需要为嵌套的div集合中的元素子集动画化收缩和展开转换。膨胀很好，但是收缩器坏了。在静态布局中，
方格可以是不同的大小，因此容器必须相应地调整(没有固定的高度或宽度)。我得到了
浏览 5提问于2017-06-17得票数 0
1回答
在图像预处理阶段，我可以修改几个参数，这些参数影响我输入算法的数据(例如，我可以在提取SURF特征时改变Hessian阈值)。因此，到目前为止的流动情况如下：我的问题是：有这么多参数可供我使用，我如何系统地挑选给我优化结果/精度的值？一种天真的方法是运行我嵌套的循环(假设i参数)，然后迭代所有的参数组合，但是如果从我的“黑箱”系统中计算精度需要5分钟，这将需要很长很长的时间。我正在
浏览 1提问于2013-07-17得票数 2
1回答
我正在使用类似于css魔法网格的东西。我试图对齐横向边框跨越不同的网格项目。顶部的图像大小总是相同的。然而，在大多数情况下，分隔的边框排列起来，因为网格的工作百分比比像素还要细，在某些屏幕上，边框是dis对齐的(参见下面的博客文章3)。我不能只使用<hr>，因为在较小的屏幕上，网格会收缩到一行，然后在一行</
浏览 1提问于2016-11-08得票数 0
回答已采纳
1回答
出于某种原因，在Chrome中，一旦打印了999行，元素就开始相互重叠。它在Firefox中运行得很好。我使用的Chrome版本是70.0.3538.102 (Official Build) (64-bit)，今天早些时候刚刚发布。这些页面是按字母顺序排序的，我在任何其他页面上都没有遇到这个问题，因为'A‘页面是唯一有超过999行的页面。
浏览 0提问于2018-11-10得票数 3
回答已采纳
1回答
我有一个kendo网格，显示在4000到6000行之间，有7列，并且能够被用户过滤，只显示用户定义的日期范围内的数据。此网格不使用新数据更新，而是只显示初始化时检索的完整数据集的子集。当我改变所显示的子集时，有一个非常明显的5秒暂停。--我想知道是否有更有效的方法可以更改数据，因为我知道有一些程序使用Kendo来显示性能更好的10,000 0 0
浏览 2提问于2021-02-19得票数 1
回答已采纳
2回答
我有一个带有一行的CSS网格。其中一个列的内容比其他列更多，我希望在不扩展其他列的情况下垂直扩展它。
浏览 2提问于2019-09-11得票数 1
回答已采纳
我有一个固定高度和宽度的柔性盒容器，里面有一些灵活的行，每个行都包含SVG对象。我怎样才能防止这种行为，而不是让行适当地收缩以适应容器？示例代码(第一行显示水平收缩；注意两个底部行</e
浏览 2提问于2020-05-09得票数 0
回答已采纳
我正在使用多个ui网格，希望只为一个网格编辑ui网格行类。但它反映给了所有人。我想要高度行应该是自动的第二个网格。.gridR.ui网格行{高度:自动！重要；}。.gridR.ui-网格行> div ..ui网格-单元格{显示:表格单元格；浮点数:无；垂直对齐:中间；高度:自动
浏览 2提问于2017-03-21得票数 1
回答已采纳
我正在处理一个大型数据集，它需要子集才能同时在多个线程上运行。为了做到这一点，我需要将它分成N个子集，希望这些子集的大小大致相同。但是，我在表中有一个类别变量，我需要确保具有相同类别的所有内容都在相同的子集内。有些类别只有2行，但有些类别最多可以有2,000行。更高的优先级是，任何类别都不会超过一个子集，所以如果我有一个包含5000行的数据集，其中3000
浏览 9提问于2021-01-30得票数 0
回答已采纳
1回答
WPF网格大小调整
、、、、
目前我有一个有两行的Grid。第一行的高度是Auto，第二行的高度是*，所以当我调整窗口大小时，第二行会随着窗口的大小而增大和缩小。____ ____我想给第二行添加一种“最小高度”，这样当我将窗口调整得足够小时，第二行就会停止收缩，而第一行则会开始收缩。有没有一种简单的方法来
浏览 2提问于2012-06-22得票数 6
回答已采纳
1回答
是否可以在javafx中的组节点中对网格窗格中的单元进行集群？我之所以要这样做，是为了在网格窗格中的子集上应用不同的css选择器。我将这些单元格放在网格窗格中(2行，4列)：c1 | c2 | d1| d2
其中我有4个子集(a1，a2) (b1，b2) (c1，c2)和(d1，d2)。但是，我尝试了嵌套网格，但是如果每个单元格的</em
浏览 5提问于2021-12-21得票数 -1
回答已采纳
2回答
我的应用程序中有一个ng网格。网格的高度和宽度是自动给定的。我可以选择将列动态添加到网格中。当列数较少时，没有问题。但是，如果有更多的列，那么不是获得水平滚动条，而是缩小我的列的大小，并且所有的列都以脏的方式出现在我的网格中。网格的宽度不会改变，所有的列都会缩小以适应网格。我错过了什么才能得到水平滚动条。编辑:
浏览 3提问于2014-11-12得票数 2
回答已采纳
我试图使用纯CSS显示一行图像，结果是所有图像都有相同的高度。例如，一个较高的图像将收缩，如果它旁边是一个较小的图像。一排可以有2-6张图像.给定9:16的图像和16:9的图像，理想的结果应该是这样的：我最初尝试使用Flexbox，但是列的宽度并没有改变--图像中的图像只是缩放以适应内部。我认为CSS网格可能会起作用，但我也无法做到这
浏览 1提问于2019-06-18得票数 3
回答已采纳
我正在通过数据视图将数据加载到光滑的网格中。在这样做的时候，我注意到了一件事。但是，如果有更多大于15行的行，网格将只保留15行。因此，当滚动/向下滚动发生时，其他行将自动删除并添加到网格中。
为什么会这样？有什么API方法可以克服这一点吗？如何处理那些自动添加/删除行？
浏览 4提问于2013-10-22得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
