[英]CSS Grid with Angular | Don't distribute grid items equally on width
我有一个包含行和列的应用程序。 我可以动态删除行。 当我删除它们时,其他项目会在网格的宽度上均匀分布。
现在我想要有类似 flex 的东西,但是有网格。 网格项目应该与它们旁边的下一个项目有一个边距。 像那样。 并且不分布在宽度上。
CSS
.column {
padding: 10px;
margin: 10px 0;
display: grid;
grid-auto-flow: column;
.row-item {
text-align: center;
display: grid;
grid-auto-rows: 25px;
grid-row-gap: 10px;
width: 9vw;
}
}
HTML
<div class="column">
<ng-container *ngFor="let jS of journeyStepDisplay">
<div *ngIf="jS.display" class="row-item">
<div class="column-item header">
<p>{{ jS.name }}</p>
</div>
</div>
</ng-container>
</div>
您必须为每个项目声明宽度。
<div class="column">
<div class="row-item">
<div class="column-item header">
<p>ciao</p>
</div>
</div>
<div class="row-item">
<div class="column-item header">
<p>ciao2</p>
</div>
</div>
<div class="row-item">
<div class="column-item header">
<p>ciao3</p>
</div>
</div>
</div>
.column {
width: 100%;
display: grid;
grid-template-columns: 150px 150px 150px 150px;
grid-template-rows: auto;
}
.row-item {
text-align: center;
}
这是一个有用的指南。 (我没有使用角度指令,但你可以添加它)
如果您有要分配的网格项的最小和/或最大宽度,则可以使用不同网格属性的组合来获得所需的结果,例如
grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
在下面的示例中,我们有一个网格,其中项目将均匀分布,最小/最大宽度为 100 像素。 如果它们不适合该行,则将插入一个新行。
.container { height: 200px; width: 600px; gap: 5px; border: 2px solid red; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 100px)); grid-template-rows: auto; padding: 10px; } .box { border: 2px solid blue; }
<div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.