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?
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.
Of course, if any other Win8 front-end developers have experience with this, your insight would be so greatly appreciated.
My .detailSection is in the middle of other columns, so it absolutely must expand and contract as needed for whatever content may fill it.
This is a snippet of my CSS as it stands now. Please let me know if I can provide any other information, of course.
.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;
}
Your CSS snippet shows column-count being defined. From your description, you don’t want to specify
column-countorwidthon the multi-column element. I’m assuming that you’re asking how you can removecolumn-countand still get the visual you want. Is that correct? Assuming it is…When the multi-column element is trying to determine how it should size itself, its height is not yet defined. As a result, it sizes as though there is no restraint on height and you get a single column of text. If you specify
height: 100%on the multi-column element and ensure that the height of its container is defined when it is sizing, you should get the visual you’re looking for.For example, let’s say your .detailFeed element is -ms-grid-row-span: 3 (spanning all of the rows). Since the third row is using a fractional unit, the Grid needs to have its height defined in advance in order to know how big the third row should be. If you wanted the Grid element to always be 100% of the height of the window, you would typically specify
height: 100%and ensure that the Grid’s percentage value resolves in time by ensuring that it has an ancestor that is non-auto height (e.g. setheight: 100%on all elements up the tree). The other option would be to use viewport height units (i.e.height: 100vh)If the grid rows the multi-column element is in were all non-auto and non-fractional, the height of the Grid would not need to be defined in advance since the grid cell height would still be defined.
Here’s some sample markup that shows what I am describing. You can run this in IE 10 or within an app. You’ll notice that as you resize the window, the number of columns adjusts.
Disclosure: I am on the team that worked on Microsoft’s implementation of the CSS Grid.