Почему последние сжимаются?

Question

[fsociety_one]

Всем хеллёу, учу CSS GRID, верстаю с её применением, и возникла проблема, что у 3 и 6 блока текст почему-то перешел на новую строку (см. на скриншоте)
Код:
HTML:

<section class="services">
      <div class="wrap">
        <h2>Our Services</h2>
        <p class="h">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<br>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
        <div class="services-list">
          <div class="services-item">
            <i class="fas fa-mobile-alt"></i>
            <h3>Research</h3>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
          </div>
          <div class="services-item">
            <i class="fas fa-mobile-alt"></i>
            <h3>Portfolio</h3>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
          </div>
          <div class="services-item">
            <i class="fas fa-mobile-alt"></i>
            <h3>Support</h3>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
          </div>
          <div class="services-item">
            <i class="fas fa-mobile-alt"></i>
            <h3>Documentation</h3>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
          </div>
          <div class="services-item">
            <i class="fas fa-mobile-alt"></i>
            <h3>Development</h3>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
          </div>
          <div class="services-item">
            <i class="fas fa-mobile-alt"></i>
            <h3>Design</h3>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
          </div>
        </div>
      </div>
    </section>

CSS: (LESS)

.services {
  padding: 175px 0 100px;
  text-align: center;
  background-color: @lg;

  .services-list {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 30px;
  }
}

Answer 1

[Николай Чуприк]

Вы не пояснили, какая вёрстка вам нужна. Вы хотите одинаковые колонки, адаптивные под текст или какие-то ещё.

Если одинаковые, то попробуйте лучше не auto, в 1fr:
grid-template-columns: 1fr 1fr 1fr;

Проблема с auto, я подозреваю, из-за ненулевого grid-gap

Comments

[fsociety_one]

Спасибо! Помогло