Проблема с загрузочной сеткой

Question

Мне нужна помощь с сеткой Bootstrap.

Я пытаюсь создать сетку из 6 карт. И я хочу, чтобы он отображал 2 строки по 3 карты, а когда экран меньше, уменьшился до 4 строк по 2 и т. Д. До получения 1 строки из 1, когда экран действительно маленький.

Моя сетка HTML-картвыглядит так:

<div class="services">
        <h2>Serviços</h2>
        <div class="cards">

          <div class="card">
            <i class="fa fa-taxi home_icons" aria-hidden="true"></i>
            <h3>Atendimento Preferencial</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>

          <div class="card">
            <i class="fas fa-calendar-alt home_icons"></i>
            <h3>Agendamentos</h3>
            <p>Aeroportos <br> Guarulhos, Viracopos, Congonhas</p>
          </div>

          <div class="card">
            <i class="fas fa-hands-helping home_icons"></i>
            <h3>Acompanhamentos</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>

          <div class="card">
            <i class="fas fa-language home_icons"></i>
            <h3>Traduçao</h3>
            <p>Português <i class="fas fa-arrows-alt-h"></i> Francês </p>
          </div>

          <div class="card">
            <i class="fas fa-bus home_icons"></i>
            <h3>City Tour / Viagens</h3>
            <p>Interior e Litoral</p>
          </div>

          <div class="card">
            <i class="fas fa-dollar-sign home_icons"></i>
            <h3>Transfer a preço fixo</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>

        </div>
      </div>

А мой CSS выглядит так:

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 16px;
}

.card {
  box-shadow: 0 0px 5px rgba(0,0,0,0.3);
  width:250px;
  text-align: center;
  border-radius: 5px;
}

.card p {
  padding-bottom: 25px;
}

// Smallest device
@media (min-width: 100px) and (max-width: 575px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Похоже, мои медиа-запросы не работают. (Я импортирую свой CSS в style.css)

https://imgur.com/a/iwhvE1z

Answer 1

@ LovlsGenesis Здесь вашему решению не нужно использовать @media экран, для которого вы можете использовать класс начальной загрузки

CSS

.card{
  min-height: 240px;
  margin: 5px;
}

.fa-taxi{
  font-size: 70px;
  margin: 20px;
}

.fa-calendar{
  font-size: 70px;
  margin: 20px;
}

.fa-handshake-o{
  font-size: 70px;
  margin: 20px;
}

.fa-globe{
  font-size: 70px;
  margin: 20px;
}

.fa-bus{
  font-size: 70px;
  margin: 20px;
}

.fa-usd{
  font-size: 70px;
  margin: 20px;
}

HTML

<br>
<h2>Serviços</h2>
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-taxi" aria-hidden="true"></i>
            <h3>Atendimento Preferencial</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-calendar"></i>
            <h3>Agendamentos</h3>
            <p>Aeroportos <br> Guarulhos, Viracopos, Congonhas</p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-handshake-o"></i>
            <h3>Acompanhamentos</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-globe"></i>
            <h3>Traduçao</h3>
            <p>Português <i class="fas fa-arrows-alt-h"></i> Francês </p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-bus"></i>
            <h3>City Tour / Viagens</h3>
            <p>Interior e Litoral</p>
          </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <div class="card text-center">
            <i class="fa fa-usd"></i>
            <h3>Transfer a preço fixo</h3>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>
  </div>
</div>

Вы можете изменить или просмотреть код Здесь, на JSFiddle