title: Flexible grid & multiple columns in Win8 App
body: <p>I have been working on a team to create apps for Windows 8. I am using CSS3 grids to layout the page, which has been mostly pretty darn easy. However, we are populating some areas of our app with data from an outside source and therefore cannot control the length of the text imported. Our app is scrolling left-to-right, so I need the grid column that is being filled to auto-size its width and to flow text into columns - so using the CSS grid and CSS columns, both set to "auto", should work just fine, right?</p>
  
  <p>Well, it doesn't. I have tried many, many different combinations of CSS but I either need to give my div a definite width (which wouldn't work if the content being imported is very short), or define a definite number of columns that text can flow into (which doesn't work for both very short or very long content). I think this is mostly due to the fact that I'm trying to build a flexible page horizontally, which even the Win8 app seems to get confused about. I'm thinking I need to find a JS/jQuery workaround for this but I'm relatively new to JS/jquery and I'm not sure what exactly I would write.</p>
  
  <p>Of course, if any other Win8 front-end developers have experience with this, your insight would be so greatly appreciated.</p>
  
  <p>My .detailSection is in the middle of other columns, so it absolutely must expand and contract as needed for whatever content may fill it.</p>
  
  <p>This is a snippet of my CSS as it stands now. Please let me know if I can provide any other information, of course.</p>
  
  <pre><code>.advisorDetail {
      height: 100%;
      -ms-grid-columns: 120px 560px 80px auto 80px auto auto;
  }
  .advisorDetail section[role=main].detailSection {
      -ms-grid-column: 4;
      display: -ms-grid;
      -ms-grid-rows: 24px 20px 1fr;
      -ms-grid-columns: auto;
  }
      .advisorDetail section[role=main].detailSection .detailFeed {
          -ms-grid-row: 3;
          column-count: 3;
          column-width: 400px;
          column-gap: 40px;
      }
  </code></pre>