Под элементом грид сетки появляется пустое пространство. Как исправить?

Question

[danteasy]

Привет!
Столкнулся с такой проблемой. После создания грид сетки заметил, что под элементом получается пустое пространство, и если сужать экран, то это пространство увеличивается.


Как это можно исправить?

<div class="desc-tiles">
                                    <div class="tile">
                                          <div>
                                                <span class="tile-count"
                                                      >48</span
                                                >
                                                <span class="tile-class"
                                                      >офисов</span
                                                >
                                                <span class="tile-type"
                                                      >в Европе и СНГ</span
                                                >
                                          </div>
                                    </div>
                                    <div class="tile">
                                          <div>
                                                <span class="tile-count"
                                                      >361</span
                                                >
                                                <span class="tile-class"
                                                      >грузовиков</span
                                                >
                                                <span class="tile-type"
                                                      >Volvo, Scania</span
                                                >
                                          </div>
                                    </div>
                                    <div class="tile">
                                          <img src="img/tile.jpg" alt="" />
                                    </div>
                                    <div class="tile">
                                          <img src="img/tile.jpg" alt="" />
                                    </div>
                                    <div class="tile">
                                          <div>
                                                <span class="tile-count"
                                                      >361</span
                                                >
                                                <span class="tile-class"
                                                      >грузовиков</span
                                                >
                                                <span class="tile-type"
                                                      >Volvo, Scania</span
                                                >
                                          </div>
                                    </div>
                              </div>

.desc-tiles {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        grid-gap: 1px;
                        .tile {
                              width: 200px;
                              height: 160px;
                              background-color: #fff;
                              text-align: center;
                              div {
                                    margin-top: 20px;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: space-between;
                              }
                        }
                  }

Comments

[Ankhena]

https://codepen.io/AnnaSummer/pen/BarLdyO

Это ваш код.
Приведите его, пожалуйста, в такой вид, чтобы можно было увидеть проблему и понять как её решать.

Вероятнее всего родитель растягивается какими-то силами, например, флексом или гридом родителя.

[danteasy]

Ankhena, Да, действительно. Это было из-за флекса. За код извиняюсь, писал на scss.

Добавление align-items: flex-start; помогло

Answer 1

[danteasy]

Решение: добавить flex-родителю, в который был вложен grid - align-items: flex-start;