title: How do you use CSS column / grid to setup a text and image collage layout?
body: <p>I am using older Skeleton css version, it is a 16 column grid system. I am trying to setup similar layout as in this picture.</p>
  
  <p><a href="http://imgur.com/sIV2aYo" rel="nofollow">http://imgur.com/sIV2aYo</a></p>
  
  <p>I am pretty new to CSS, is using two containers (one inside another) a proper method?</p>
  
  <p>Here is a sample code of what I been trying, but not working out too well =(</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="eight columns alpha"&gt;
      &lt;div class="image"&gt;
        &lt;img alt="" src="images/coffee.jpg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="eight columns omega"&gt;
  
      &lt;div class="container"&gt;
        &lt;div class="eight columns"&gt;
          &lt;img alt="" src="images/plate.jpg"&gt;
        &lt;/div&gt;
  
        &lt;div class="eight columns"&gt;
          &lt;img alt="" src="images/macaro.jpg"&gt;
        &lt;/div&gt;
  
        &lt;div class="text area"&gt;
          &lt;p class="quote"&gt;"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."&lt;/p&gt;
  
          &lt;p class="name"&gt;Norm Mui, Coffee Foundry&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt; &lt;!-- 2nd container --&gt;
    &lt;/div&gt;
  &lt;/div&gt; &lt;!-- 1st container --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance.</p>