I am trying to align these divs evenly with no spaces; I don't want spaces as shown in-between 4-6

Question

https://stackblitz.com/edit/angular-vdhbfv?file=src/app/app.component.html

<div class="row">
  <div class="item" *ngFor="let item of items">
    <h1>{{item.title}}</h1>
    <h3>{{item.subtitle}}</h3>
    <p>{{item.desc}}</p>
  </div>
</div>

.item {
  margin: 10px;
  padding: 15px;
  background-color: navy;
  max-width: 120px;
  overflow: hidden;
  word-wrap: break-word;
  height: 100%;
}

.row {
  display: flex;
  /* justify-content: flex-start; */
  /* align-items: baseline; */
  flex-flow:wrap;
  flex-wrap: wrap;
  max-width: 400px;
  background-color: rgb(186, 201, 186);
}

I want to align all so that there is no space, I want them to align evenly so that the tops and bottoms arent too far apart

include your code in the question. – ThS Jul 22 '19 at 23:55 — ThS, Jul 22 '19 at 23:55
Get rid of `.item{height:100%;}` – StackSlave Jul 23 '19 at 00:06 — StackSlave, Jul 23 '19 at 00:06

score 0 · Answer 1 · answered Jul 23 '19 at 00:15

You have to get rid of height: 100% on .item and apply align-items: stretch to .row.

Here's an example :

.row {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch; /** allow elements to have same height **/
  max-width: 400px;
  background-color: rgb(186, 201, 186);
}

/** removed height 100% so it the elements can stretch evenly **/
.item {
  margin: 10px;
  padding: 15px;
  background-color: navy;
  max-width: 120px;
  overflow: hidden;
  word-wrap: break-word;
}

<div class="row">
  <div class="item" *ngFor="let item of items">
    <h1>Title</h1>
    <h3>subtitle</h3>
    <p>description</p>
  </div>
  <div class="item" *ngFor="let item of items">
    <h1>Title</h1>
    <h3>subtitle</h3>
    <p>description</p>
  </div>
  <div class="item" *ngFor="let item of items">
    <h1>Title</h1>
    <h3>subtitle</h3>
    <p>description</p>
  </div>
  <div class="item" *ngFor="let item of items">
    <h1>Title</h1>
    <h3>subtitle</h3>
    <p>description</p>
  </div>
  <div class="item" *ngFor="let item of items">
    <h1>Title</h1>
    <h3>subtitle</h3>
    <p>this one will cause the other elements to stretch till matching its height. Need to add some more text to make it a bit long</p>
  </div>
  <div class="item" *ngFor="let item of items">
    <h1>Title</h1>
    <h3>subtitle</h3>
    <p>description</p>
  </div>
  <div class="item" *ngFor="let item of items">
    <h1>Title</h1>
    <h3>subtitle</h3>
    <p>description</p>
  </div>
</div>

Hope I pushed you further.

I am trying to align these divs evenly with no spaces; I don't want spaces as shown in-between 4-6

1 Answers1