Gallery with Materialize in CSS position?
<p>I am trying to make a instagram like website I need some help with positioning cards in CSS. Because when ever they are added they get put underneath one and other. I have tried to play with positing in CSS and can't get the perfect fit.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;!-- Compiled and minified CSS --&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css"&gt;

&lt;!-- Compiled and minified JavaScript --&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"&gt;&lt;/script&gt;

  &lt;br&gt;
    &lt;div class="container"&gt;

      &lt;div class="row"&gt;

           &lt;div class="col s12 m7"&gt;
             &lt;div class="card large"&gt;
               &lt;div class="card-image"&gt;
                 &lt;img src="images/test.jpg"&gt;
                 &lt;span class="card-title"&gt;Card Title&lt;/span&gt;
               &lt;/div&gt;
               &lt;div class="card-content"&gt;
                 &lt;p&gt;I am a very simple card. I am good at containing small bits of information.
                 I am convenient because I require little markup to use effectively.&lt;/p&gt;
               &lt;/div&gt;
               &lt;div class="card-action"&gt;
               &lt;a class="waves-effect waves-light btn modal-trigger" href="#modal1"&gt;Modal&lt;/a&gt;
               &lt;/div&gt;
             &lt;/div&gt;
           &lt;/div&gt;

         &lt;/div&gt;

         &lt;div class="row"&gt;

              &lt;div class="col s12 m7"&gt;
                &lt;div class="card large"&gt;
                  &lt;div class="card-image"&gt;
                    &lt;img src="images/test.jpg"&gt;
                    &lt;span class="card-title"&gt;Card Title&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="card-content"&gt;
                    &lt;p&gt;I am a very simple card. I am good at containing small bits of information.
                    I am convenient because I require little markup to use effectively.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="card-action"&gt;
                  &lt;a class="waves-effect waves-light btn modal-trigger" href="#modal1"&gt;Modal&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;

            &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>If you look at instagram it has 3 pictures beside each other. I want to do the same but with 2 of them any advice?
<a href="https://i.stack.imgur.com/jkgCb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jkgCb.jpg" alt="enter image description here"></a></p>