CSS 网格 Angular |不要在宽度上平均分配网格项目

Question

我有一个包含行和列的应用程序。我可以动态删除行。当我删除它们时，其他项目会在网格的宽度上均匀分布。

现在我想要类似 flex 的东西，但带有网格。网格项目应该与旁边的下一个项目有边距。 Like that。并且不会在整个宽度上分布。

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>

Answer 1

您必须为每个项目声明宽度。

<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;
}

here 有用的指南。（我没有使用 angular 中的指令，但你可以添加它）

Answer 2

如果要分发的网格项的宽度最小 and/or 最大，则可以使用不同网格属性的组合来获得所需的结果，例如

grid-template-columns: repeat(auto-fit, minmax(100px, 100px));

在下面的示例中，我们有一个网格，其中项目将均匀分布，min/max 宽度为 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>

CSS 网格 Angular |不要在宽度上平均分配网格项目

CSS Grid with Angular | Don't distribute grid items equally on width

html

css

angular