как правильно поставить div рядом друг с другом в css?

Question

У меня есть 6 карт, которые отображаются в строках с использованием библиотеки Materialise. Но по какой-то причине я не могу сделать карты примерно такими, как показано ниже: xxxxxx Итак, кто-нибудь может мне помочь заставить его работать, я застрял с материализацией css или я могу переопределить это? Спасибо за помощь. Все, что мне нужно, это поставить 3 деления сверху, а остальные 3 - снизу. Итак, 2 ряда.

вот мой код:

    <div class="row">
    <div class="col s12 m7">
      <div class="card">
        <div class="card-image">
     <img src="https://img.icons8.com/wired/64/000000/enter-2.png">
          <!-- <span class="card-title">Check In</span> -->
        </div>
        <div class="card-content">
          <p>Check In  </p>
        </div>
        <div class="card-action">
          <a href="#">Check In</a>
        </div>
      </div>
    </div>
  </div>

<div class="row">
  <div class="col s12 m7">
    <div class="card">
      <div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/greek-pillar.png">
  </div>
      <div class="card-content">
        <p>Expand your opportunities</p>
      </div>
      <div class="card-action">
        <a href="#">View Pillars</a>
      </div>
    </div>
  </div>
</div>



<div class="row">
  <div class="col s12 m7">
    <div class="card">
      <div class="card-image">
        <img src="https://img.icons8.com/ios/50/000000/chat-message.png">
  </div>
      <div class="card-content">
        <p>Chat  </p>
      </div>
      <div class="card-action">
        <a href="#">Start Chat</a>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col s12 m7">
    <div class="card">
      <div class="card-image">
<img src="https://img.icons8.com/ios-filled/50/000000/search.png">
    </div>
      <div class="card-content">
        <p>Find plenty of resources.</p>
      </div>
      <div class="card-action">
        <a href="#">View Resources</a>
      </div>
    </div>
  </div>
</div>


<!-- gallery -->
<div class="row">
  <div class="col s12 m7">
    <div class="card">
      <div class="card-image">
<img src="https://img.icons8.com/dotty/50/000000/gallery.png">
</div>
      <div class="card-content">
        <p>Gallery of events</p>
      </div>
      <div class="card-action">
        <a href="#">View Gallery</a>
      </div>
    </div>
  </div>
</div>


<div class="row">
  <div class="col s12 m7">
    <div class="card">
      <div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/easel.png">
</div>
      <div class="card-content">
        <p>VAPA</p>
      </div>
      <div class="card-action">
        <a href="#">View VAPA</a>
      </div>
    </div>
  </div>
</div> 

CSS:

    .card{
  width: 50%;
}

.card .card-image {
  width: 20%;
}
.row {
  display: flex;
  flex-direction: column;
} 

Answer 1

Я надеюсь, что это то, что вы ожидаете:

использовать col s12 m4 класс.

<div class="row">
  <div class="col s12 m4">
  </div>

  <div class="col s12 m4">
  </div>

  <div class="col s12 m4">
  </div>
</div>

<div class="row">
  <div class="col s12 m4">
  </div>
  <!-- gallery -->
  <div class="col s12 m4">
  </div>

  <div class="col s12 m4">
  </div>
</div>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="row">
  <div class="col s12 m4">
    <div class="card">
      <div class="card-image">
        <img src="https://img.icons8.com/wired/64/000000/enter-2.png">
        <!-- <span class="card-title">Check In</span> -->
      </div>
      <div class="card-content">
        <p>Check In </p>
      </div>
      <div class="card-action">
        <a href="#">Check In</a>
      </div>
    </div>
  </div>

  <div class="col s12 m4">
    <div class="card">
      <div class="card-image">
        <img src="https://img.icons8.com/ios/50/000000/greek-pillar.png">
      </div>
      <div class="card-content">
        <p>Expand your opportunities</p>
      </div>
      <div class="card-action">
        <a href="#">View Pillars</a>
      </div>
    </div>
  </div>



  <div class="col s12 m4">
    <div class="card">
      <div class="card-image">
        <img src="https://img.icons8.com/ios/50/000000/chat-message.png">
      </div>
      <div class="card-content">
        <p>Chat </p>
      </div>
      <div class="card-action">
        <a href="#">Start Chat</a>
      </div>
    </div>
  </div>
</div>

<div class="row">

  <div class="col s12 m4">
    <div class="card">
      <div class="card-image">
        <img src="https://img.icons8.com/ios-filled/50/000000/search.png">
      </div>
      <div class="card-content">
        <p>Find plenty of resources.</p>
      </div>
      <div class="card-action">
        <a href="#">View Resources</a>
      </div>
    </div>
  </div>


  <!-- gallery -->
  <div class="col s12 m4">
    <div class="card">
      <div class="card-image">
        <img src="https://img.icons8.com/dotty/50/000000/gallery.png">
      </div>
      <div class="card-content">
        <p>Gallery of events</p>
      </div>
      <div class="card-action">
        <a href="#">View Gallery</a>
      </div>
    </div>
  </div>


  <div class="col s12 m4">
    <div class="card">
      <div class="card-image">
        <img src="https://img.icons8.com/ios/50/000000/easel.png">
      </div>
      <div class="card-content">
        <p>VAPA</p>
      </div>
      <div class="card-action">
        <a href="#">View VAPA</a>
      </div>
    </div>
  </div>
</div>