title: CSS dynamic responsive column layout
body: <p>I have been searching for answers but could not find anything that solves my problem.</p>
  
  <p>I have a website with dynamic content. What I want is that the content flows into columns when possible, in order to minimize scrolling.</p>
  
  <p>The items have dynamic heights.</p>
  
  <pre><code>  xxx item 1 xxx  |  xxx item 4 xxx
    xxxxxxxxxxxxxx  |  xxxxxxxxxxxxxx
    xxxxxxxxxxxxxx  |------------------
  ------------------|  xxx item 5 xxx
    xxx item 2 xxx  |  xxxxxxxxxxxxxx
    xxxxxxxxxxxxxx  |------------------
  ------------------|  xxx item 6 xxx
    xxx item 3 xxx  |  xxxxxxxxxxxxxx
    xxxxxxxxxxxxxx  |  xxxxxxxxxxxxxx
  </code></pre>
  
  <p>But when the browser window is resized, I want to put the content in a list, so a one-column table.</p>
  
  <p>I know about media queries, but how should I configure it so that it flows into a 2-column layout when the window is wide enough?</p>
  
  <p>It is also important that the items (the "group" div in the HTML below) are not split in half at the bottom.</p>
  
  <p>The content HTML (using KnockoutJS for the dynamic data, the content inside groupsContainer is repeated because of the foreach attribute in groupsContainer):</p>
  
  <pre><code>&lt;div data-bind="foreach: $data.groups" class="groupsContainer"&gt;
      &lt;div class="group"&gt;
          &lt;div data-bind="text: $data.name" class="groupTitle"&gt;&lt;/div&gt;
          &lt;table data-bind="foreach: $data.fields" class="fieldsContainer"&gt;
              &lt;tr&gt;
                  &lt;td data-bind="text: $data.name" class="fieldName"&gt;&lt;/td&gt;
                  &lt;td data-bind="template: { name: $data.typeId, data: $data}" class="fieldValue"&gt;&lt;/td&gt;
                  &lt;td class="valueChanged" data-bind="if:$data.valueChanged"&gt;&lt;img
                      src="resources/images/control-state-edited.png" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.groupsContainer {
      -webkit-column-width: 20em;
      -webkit-column-gap: 2em;
      -webkit-column-rule: 1px solid #eee;
      -webkit-column-count: 2;
      -moz-column-width: 20em;
      -moz-column-gap: 2em;
      -moz-column-rule: 1px solid #eee;
      -moz-column-count: 2;
      -ms-column-width: 20em;
      -ms-column-gap: 2em;
      -ms-column-rule: 1px solid #eee;
      -ms-column-count: 2;
      column-width: 20em;
      column-gap: 2em;
      column-rule: 1px solid #eee;
      column-count: 2;
  }
  </code></pre>