如何在CSS网格中使用grid-template-rows为所有动态生成的行设置行高
我是新的CSS网格和使用设计一个发票。在我的代码示例中，我有#itemscontent元素作为grid。此部分将有从数据库加载的发票项目，可以有n行数。
为了嘲弄我在该节中添加了3行。但是我在grid-template-rows中设置的高度值只应用于网格中的第一行。剩余的行只是将剩余的可用空间拆分。
对于3行示例，grid-template-rows:2rem 2rem 2rem按预期工作，但grid-template-rows:2rem仅对第一行应用高度。
CSS网格中是否有任何属性可用于将2rem指定为#itemscontent网格中所有行的高度？
null
body {
margin: 1.25rem;
border: 1px solid;
display: grid;
grid: "header" "main" "footer";
grid-template-rows: 3rem calc(100% - 6rem) 3rem;
height: 100vh;
}
header {
grid-area: header;
display: grid;
grid: "caption";
grid-template-rows: 3rem;
}
main {
grid-area: main;
display: grid;
grid: "invoicedetails" "invoiceitems" "invoiceinformation";
grid-template-rows: 15% 70% 15%;
border: 1px solid;
border-left: 0;
border-right: 0;
}
#invoicedetails {
grid-area: invoicedetails;
display: grid;
grid: "shop customer invoice";
grid-template-columns: 33.33% 33.33% 33.33%;
}
#customer {
border: 1px solid;
border-top: 0;
border-bottom: 0;
}
#invoiceitems {
grid-area: invoiceitems;
display: grid;
grid: "itemsheader" "itemscontent" "itemsfooter";
grid-template-rows: 5% 80% 15%;
border: 1px solid;
border-left: 0;
border-right: 0;
}
#itemsheader {
grid-area: itemsheader;
display: grid;
grid: "sno description hsn price gst unit unitprice";
grid-template-columns: 10% 40% 10% 10% 10% 10% 10%;
align-items: center;
}
#itemscontent {
grid-area: itemscontent;
display: grid;
grid: "sno description hsn price gst unit unitprice";
grid-template-rows: 2rem;
grid-template-columns: 10% 40% 10% 10% 10% 10% 10%;
border: 1px solid;
border-left: 0;
border-right: 0;
align-items: center;
}
#invoiceinformation {}
footer {
grid-area: footer;
display: grid;
grid-template-rows: 3rem;
}<html>
<head></head>
<body>
<header></header>
<main>
<section id="invoicedetails">
<section id="shop"></section>
<section id="customer"></section>
<section id="invoice"></section>
</section>
<section id="invoiceitems">
<section id="itemsheader">
<div>S.No</div>
<div>Description</div>
<div>HSN/SAC</div>
<div>Price</div>
<div>GST (%)</div>
<div>Unit</div>
<div>Unit Price</div>
</section>
<section id="itemscontent">
<div>1</div>
<div>Pen</div>
<div>-</div>
<div>10</div>
<div>0</div>
<div>5</div>
<div>50</div>
<div>2</div>
<div>Pencil</div>
<div>-</div>
<div>10</div>
<div>0</div>
<div>5</div>
<div>50</div>
<div>3</div>
<div>SubTotal</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>100</div>
</section>
<section id="itemsfooter"></section>
</section>
<section id="invoiceinformation"></section>
</main>
<footer></footer>
</body>
</html>null
共有1个答案
CSS为您提供了以下服务：
#itemscontent { grid-auto-rows: 2rem; }
https://developer.mozilla.org/en-us/docs/web/css/grid-auto-rows
然后可以删除该元素的grid-template-rows定义。
-
我创建了一个有三列的vaadin网格，其中一列包含HTML内容。HTML数据可以在多行中。默认情况下，网格中只显示第一行HTML数据。 我在用vaadin 7
-
https://code.juejin.cn/pen/7316068943830581274 �� 截图出自这里 ● 请问在使用 grid 布局时，如何设为行数为 auto-fill 为什么指定的高不生效？ ● 如图，第一行已经按设定显示了高度，其它几行高度不听令 ● 是不是只有在子元素 span 上设 min-height: px 才是唯一的办法 谢谢 能使行数为 auto-fill 时也让高度
-
目前，我正在生成表头和行，但我希望使行更具动态性。如何在不重复一次的情况下打印行的数据？我怎样才能像标题一样使用1语句呢？所以基本上我只需要调用{row}，它应该生成该行包含的所有内容，而不必键入{row.school}等等。。。
-
我有一个有八张（或更少）牌的格子。我希望卡片是自动放置在网格，不知道他们的宽度和高度。也就是说，宽度和高度应该在网格样式中指定。它的工作很好，当我有所有的8张牌显示。示例： null null 但是，当牌数少于8张时，问题就出现了。格子的最后一排没有被牌占据，但仍然有高度： null null 我可以通过删除Grid-Template-Area，将grid-template-rows替换为grid
-
随着CSS网格布局模块即将在Firefox和Chrome中发布，我想我应该尝试一下如何使用它。 我尝试创建一个简单的网格，其中一个项目横跨所有行的左侧，其他项目(、、、等）横跨各个行的右侧。横过行右侧的项的数量是可变的，因此可能存在、、、等的任何组合，因此我使用了属性。因此，我无法为定义要跨转的固定行数，但我希望跨转所有可用行。 null null 要使跨越所有行而不知道最终会有多少行，我应该做什
-
问题内容： 我在数据库中有几条记录，它们想要形成如下URL： 该会从数据库中拉出。 有什么办法可以在flask中取出吗？ 问题答案： 你可以将变量名放在views.py函数中。例如： 为了使数据库信息显示在你的站点上，你需要将参数传递到模板中。因此，在模板中，你将引用以下参数： 然后，当你访问mysite.com/post/anything_here时，“ anything_here”将进入你的函