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

I have a app which has rows and columns. I can dynamically remove rows. When I remove them then the other items distribute themself equaly over the width of the grid.

Now I want to have something like flex, but with grid. The grid items should have a margin to the next item beside them. Like that. And not distribute themself over the width.

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 >
  <ng-container *ngFor="let jS of journeyStepDisplay">
    <div *ngIf="jS.display" >
      <div >
        <p>{{ jS.name }}</p>
      </div>
    </div>
  </ng-container>
</div>

CodePudding user response：

If you have a minimum and/or a max width of the grid items that are to be distributed, you can use a combination of different grid properties to get the desired outcome, like

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

In the example below, we have a grid where the items will be distributed evenly with a min/max width of 100px. If they can't fit into the row a new row will be inserted.

.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 >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

You have to declare width for each item.

<div >
  
    <div >
      <div >
        <p>ciao</p>
      </div>
    </div>
  
  <div >
      <div >
        <p>ciao2</p>
      </div>
    </div>
  
  <div >
      <div >
        <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 a useful guide. (I didn't use directive from angular, but you can add it)