如何删除css网格的第二行

Question

在此处输入图像描述

嗨，伙计们，我正试图删除一行。我附上了一张我现在拥有的照片。我只想要1行3列

display: grid;
grid - template - rows: auto;
grid - template - columns: 1 fr 1 fr 1 fr;

<div class="list-loan-info" ng-scrollbar rebuild-on="rebuild:me">
<div automationid="FieldName" class="field-name" style="float:left;"> fieldName </div>
<div automationid="OldValue" class="old-value">oldValue &nbsp;</div>
<div automationid="NewValue" class="new-value-true">newValue</div>
<div automationid="NewValue" class="new-value-false">newValue</div>
<br />
</div>

Answer 1

将网格模板行添加到代码中

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;

Answer 2

使用下面的代码，我保证不会超过3行。如果你有任何问题，请告诉我。

HTML-

<div class="list-loan-info" ng-scrollbar rebuild-on="rebuild:me">
<div automationid="FieldName" class="field-name" style="float:left;"> fieldName </div>
<div automationid="OldValue" class="old-value">oldValue &nbsp;</div>
<div class='new-value'>
<div automationid="NewValue" class="new-value-true">newValue</div>
<div automationid="NewValue" class="new-value-false">newValue</div>
</div>
</div>

CSS-

.list-loan-info{
display: grid;
grid-template-columns: auto auto auto;
column-gap: 2rem;
}
.new-value{
display: grid;
grid-template-columns: auto auto;
column-gap: 1rem;
}

Answer 3

解决方案

• 您必须在包装器div中设置网格和布局，以及列和行的数量及其大小

---

/* Here you define the grid */
.list-loan-info {
display: grid;
grid-template-columns: 1 fr 1 fr 1 fr;
grid-template-rows: 1fr 1 fr;
}

• 然后您必须设置子div在这个包装器div中的位置。您可以使用设置位置
• 网格行
• 栅格柱

---

这里是一个所有相邻的示例。

.list-loan-info {
display: grid;
grid-template-columns: 1 fr 1 fr 1 fr;
grid-template-rows: 1fr;
}
.field-Name {
grid-row: 1;
grid-column: 1;
;
}
.new-value-true {
grid-row: 1;
grid-column: 2;
;
}
.new-value-false {
grid-row: 1;
grid-column: 3;
;
}
.old-value {
grid-row: 1;
grid-column: 4;
}

<div class="list-loan-info" ng-scrollbar rebuild-on="rebuild:me">
<div automationid="FieldName" class="field-name" style="float:left;"> fieldName </div>
<div automationid="OldValue" class="old-value">oldValue &nbsp;</div>
<div automationid="NewValue" class="new-value-true">newValue</div>
<div automationid="NewValue" class="new-value-false">newValue</div>
<br />
</div>

正如评论中所要求的，这里是一个列之间的示例。

.list-loan-info {
display: grid;
grid-template-columns: 1 fr 1 fr 1 fr;
grid-template-rows: 1fr 1fr;
}
.field-Name {
grid-row: 1;
grid-column: 1;
;
}
.new-value-true {
grid-row: 2;
grid-column: 2;
;
}
.new-value-false {
grid-row: 1;
grid-column: 3;
;
}
.old-value{
grid-row: 1;
grid-column: 2;
}

<div class="list-loan-info" ng-scrollbar rebuild-on="rebuild:me">
<div automationid="FieldName" class="field-name" style="float:left;"> fieldName </div>
<div automationid="OldValue" class="old-value">oldValue &nbsp;</div>
<div automationid="NewValue" class="new-value-true">newValue</div>
<div automationid="NewValue" class="new-value-false">newValue</div>
<br />
</div>

漂亮的阅读CSS网格

• https://css-tricks.com/snippets/css/complete-guide-grid/