如何在CSS网格中使用grid-template-rows为所有动态生成的行设置行高
在CSS网格布局中，grid-template-rows属性用于定义网格的行高。如果你需要为所有动态生成的行设置相同的行高，可以使用以下方法：
基础概念
- CSS网格布局：CSS网格布局是一个二维布局系统，允许你在两个方向（行和列）上创建复杂的布局。
- grid-template-rows：此属性定义了网格的行高。
相关优势
- 灵活性：可以轻松地为每一行设置不同的行高。
- 响应式设计：可以通过媒体查询动态调整行高以适应不同的屏幕尺寸。
类型与应用场景
- 固定行高：适用于内容高度相对固定的布局。
- 百分比行高：适用于需要根据容器高度动态调整的布局。
- auto关键字：适用于内容高度不固定的情况，行高会根据内容自动调整。
示例代码
假设你有一个容器grid-container，并且你想为所有动态生成的行设置一个固定的行高（例如，每行高度为100px）。
<!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: repeat(auto-fill, 100px); /* 每行高度为100px */
gap: 10px; /* 行间距 */
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<!-- 更多动态生成的行 -->
</div>
</body>
</html>解释
grid-template-rows: repeat(auto-fill, 100px);：这行代码表示网格会自动填充尽可能多的行，每行的高度为100px。auto-fill：这个关键字会尽可能多地创建行，直到容器没有足够的空间为止。gap: 10px;：设置行间距。
遇到问题及解决方法
问题：行高设置不生效
原因：
- 确保
.grid-container的display属性设置为grid。 - 检查是否有其他CSS规则覆盖了你的行高设置。
解决方法：
- 使用浏览器的开发者工具检查元素，查看实际应用的样式。
- 确保没有更高优先级的CSS规则影响行高。
问题：行高不一致
原因：
- 内容高度不一致导致行高自动调整。
- 其他CSS规则影响了特定行的行高。
解决方法：
- 使用
minmax()函数来设置行高的最小值和最大值，确保行高在一定范围内保持一致。 - 使用
minmax()函数来设置行高的最小值和最大值，确保行高在一定范围内保持一致。
通过以上方法，你可以有效地为所有动态生成的行设置统一的行高，并解决可能遇到的问题。
相关·内容
我是新手CSS网格和用来设计发票。在我的代码示例中，我将#itemscontent元素设置为grid。此部分将从数据库加载发票项，并且可以有n行数。 模拟一下，我已经向该部分添加了3行。但我在grid-template-rows中设置的高度值仅应用于网格中的第一行。剩余的行将拆分剩余的可用空间
浏览 70提问于2021-03-22得票数 0
回答已采纳
我想使用grid-template-rows: repeat(auto-fill, 200px)为网格中的每一行设置行高，但意识到它只适用于网格的第一行。事实证明，grid-auto-rows: 200px更适合我的需要，但我仍然想知道为什么在grid-template-rows: repeat(auto-fill, 200px
浏览 0提问于2020-06-30得票数 3
回答已采纳
2回答
我有一个CSS网格布局，其中顶行使用grid-column属性跨越整个网格。
有人知道如何将此行设置为100px高，并将所有后续行的grid-auto-rows高度设置为200px吗？我知道我可以使用grid-template-rows为所有特定的行输入单独的</em
浏览 1提问于2017-10-30得票数 8
回答已采纳
我有一个包含一些链接的css网格。它是一个三列网格，具有任意数量的行(取决于项目的数量)。grid-template-columns: repeat(3, 1fr); //设置为三列宽
grid-template-rows: repeat(auto-fill); //自动<em
浏览 2提问于2020-08-27得票数 3
在我的容器元素中，我设置了display: grid和grid-template-rows: 2fr 2fr 1fr，但是子元素能够超出行高。顶部行中的子行几乎能够占据容器网格的整个高度。是否有一种(从容器元素)强制所有子元素收缩以适应2fr/1fr行高的方法？还是我一定要从孩子那里拿出来？
浏览 5提问于2020-09-18得票数 0
回答已采纳
2回答
我正在尝试创建一个有两行的CSS网格。我希望底部的行高固定为47px。这很简单。是第一排给我带来了麻烦。
我希望我的CSS网格的顶行是最小的250px高，即使行中没有内容。但如果内容在那里，我希望行的高度扩展到最大303px高。也就是说，只有当内容需要时，我
浏览 26提问于2018-08-21得票数 4
1回答
(我不太懂英语，请原谅我的错误)然后我想创建一个屏幕宽度为65%的article_box，这样当我改变屏幕分辨率时，它就会调整大小，并且这个框必须有margin-top: 0;
浏览 0提问于2020-11-19得票数 3
1回答
我正在创建一个动态站点，其中父div和子div (它们的宽度是可变的)在父div中创建，并尝试这样做:当创建一个新div时，它被向下推到它的父级高度被填充，然后启动一个新的列，例如：
浏览 0提问于2018-07-19得票数 0
回答已采纳
我有一个ng-grid，其中我需要有条件地扩展行的大小。renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>我可以看到高度增加了，但扩展行下面的行将不会调整有没有人做过这样的事。我做得对吗?或者其他合适的解决方案？
浏览 0提问于2014-09-18得票数 0
1回答
CSS网格动态行和列
、、、
我想使用CSS网格创建一个表，该表的格式如下(绘制得不好，但消息跨)：
我来解释。假设头单元格大小为2x / 2y。每个标题行的单元格为x/ 2y，每个标头列单元格为2x / y，内部表格单元格大小(红色)为x/ y。
除了标头单元格之外，其他所有内容都是动态的，例如，我可以从数据中得到7行<
浏览 0提问于2019-04-16得票数 1
回答已采纳
我正在使用HTML和CSS (网格)来制作一个相当简单的网站。主网格有1列和5行。在第4行中有一个1行3列的网格。其中包含网格的第4行设置
浏览 0提问于2019-06-12得票数 0
2回答
我希望使用css网格(而不是柔性盒)实现相当简单的布局：目前，我有这个(类似的，但有一个不需要的空白区)我的问题是，我的示例代码中缺少的部分是什么，以实现所需的布局?更复杂一点，因为我还有一排为此，最后一行的行模板<e
浏览 13提问于2021-12-28得票数 1
回答已采纳
我有一个很好的网格：.grid { height: 100vh; grid-template-columns</div> <div class="card"></div>
<div class="card">&l
浏览 1提问于2020-07-24得票数 0
回答已采纳
我最近开始使用css网格()，但我觉得自己并没有充分利用它们。我的问题涉及显示数据是动态的情况。例如，我想显示以下内容：简言之：
每一行数据可以包含一个或两个列行被分隔行数据是动态的，css网格布局不能预先设置。这感觉就像css网格有一种方法可以做到这一点(不需要动态生成c
浏览 5提问于2020-10-23得票数 0
回答已采纳
1回答
我遇到的问题是，当视口的高度小于定义的最小行高时，行垂直溢出其容器。在下面的示例中添加了红色和绿色边框后，可以看到行的高度没有低于定义的500像素，但是网格容器的大小仍然小于视图端口，后者现在小于500像素。如果我从height类中删除grid CSS属性，容器不会缩小到其内容以下，但是当视图端口高于500个像素时，它也不会填充垂直空间。因为我希
浏览 5提问于2022-02-05得票数 3
回答已采纳
1回答
我将一个网格嵌套在另一个网格中，并将内部网格(#content)的列和行的大小定义为1fr。 但是当我添加文本时，列显示正确，但是行高变大了，因此整个容器本身也变大了。我假设这是因为字体高度大于1fr，但行的高度甚至比字体大小更大。 为什么行高会发生变化？附注:当我将行大小设置为auto时，一切都正常工作，但我
浏览 21提问于2019-02-18得票数 1
下面是创建的柱塞$scope.filterOptions = { } $scope.filterOptions.filterText=$scope.filterText;
如果在文本框中输入"moroni“，则只显示网格中的一行。但在右边，空白
浏览 4提问于2014-09-04得票数 0
1回答
我使用来自的CSS网格多边形填充<div style="display: grid; grid-template-columns: 200px 300px; grid-template-rows303px" horizontal-alignment="Left" vertical-alignment="Top">Button</button>
</div
浏览 2提问于2016-01-13得票数 0
我已经用这个规范创建了一个CSS网格：.section-grid { grid-template-rows: 1fr;
grid-template-columns: 50% 50%;CSS网格更改排序，以便div 3和div 4显示为已更改？我将动态使用它，因为我看到两个div是一行，应该每隔一行更改一次。
浏览 7提问于2018-01-02得票数 1
我使用的是网格。我的第一行是20px，我希望所有后续行都使用1fr来均匀分布高度。我正在执行grid-template-rows: 20px repeat(2, 1fr);，但这只适用于我的代码中设置的div数量。我希望它适用于动态数量的div。我尝试了grid-template-rows: 20px repeat(auto-f
浏览 7提问于2021-01-14得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
