locked
2 column grid, auto expanding second column based on content

    Question

  • I have a div with display:-ms-grid and 2 columns. What I want to achieve is have the first column take up x amount of pixels (fixed width) and have the 2nd column expand to the size of its contents. There's a specified height to the container so I don't want any overflow-y, and the content in the 2nd column could vary up to a maximum number. e.g could contain between 0-6 items.  What I want is similar to here http://jsfiddle.net/K8B5b/2/  (will need to view in ie10 but it's difficult to edit in ie10) except that in theory the 2nd item should flow into a second column and there should also be a 3rd item showing horizontally. rather than vertically. the html and css is copied below for reference:

    <div id="h"> <div id="o"> <p>this column should take up a large fixed width space</p> </div> <div id="t"> <div class="item"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem libero, congue aliquet congue a, luctus nec dui. Donec tempus massa sit amet urna dictum rutrum. Suspendisse potenti. Pellentesque luctus risus id ligula facilisis vitae mollis lorem condimentum. Nulla lectus nulla, fermentum eu ullamcorper non, eleifend id dui. Vivamus a sem sit amet turpis tempus posuere id non massa. Praesent eu mauris id nisi placerat rutrum. Sed condimentum turpis vitae ante placerat pellentesque. Fusce id lacus ac leo sollicitudin consequat in posuere sapien. </p> </div> <div class="item"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem libero, congue aliquet congue a, luctus nec dui. Donec tempus massa sit amet urna dictum rutrum. Suspendisse potenti. Pellentesque luctus risus id ligula facilisis vitae mollis lorem condimentum. Nulla lectus nulla, fermentum eu ullamcorper non, eleifend id dui. Vivamus a sem sit amet turpis tempus posuere id non massa. Praesent eu mauris id nisi placerat rutrum. Sed condimentum turpis vitae ante placerat pellentesque. Fusce id lacus ac leo sollicitudin consequat in posuere sapien. </p> </div>

    <div class="item"><p>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem libero, congue aliquet congue a, luctus nec dui. Donec tempus massa sit amet urna dictum rutrum. Suspendisse potenti. Pellentesque luctus risus id ligula facilisis vitae mollis lorem condimentum. Nulla lectus nulla, fermentum eu ullamcorper non, eleifend id dui. Vivamus a sem sit amet turpis tempus posuere id non massa. Praesent eu mauris id nisi placerat rutrum. Sed condimentum turpis vitae ante placerat pellentesque. Fusce id lacus ac leo sollicitudin consequat in posuere sapien. </p> </div> </div> </div>​

    and the css 

    body{
    background:#d6d6d6;
    }
    #h{
        display:-ms-grid;
        -ms-grid-columns:1024px auto;
        border:1px solid black;
        padding:20px;
        float:left;
        height:400px;
        overflow:hidden;
        margin:40px;
    background:white;
    }
    
    #o{
        -ms-grid-column:1;
        border:1px solid red;
    }
    #t{
        -ms-grid-column:2;
            border:1px solid blue;
    }
    .item{
        width:400px;
        margin:20px;
    float:left;
    }
    
    ​

    Does anybody know how I could achieve this? I've tried columns (column-width, column-count etc.) but no luck as I don't know how many columns I will have and "auto" doesn't appear to work correctly for me http://jsfiddle.net/K8B5b/3/ (there should be 3 paragraphs of ipsum) as it only shows 1 column

    If anyone could help me with this it would be greatly appreciated

    Wednesday, November 14, 2012 2:54 PM

Answers

  • I think you are mixing up the Multi-Column layout and the Grid Layout.

    In your code (the last referenced jsfiddle), Column-width enables multi-column layout within the that specific Grid Layout cell. The reason why you are not seeing multi-columns is the <div> elements you have wrapped around every <p>. If you remove those divs and just use <p class="item"></p><p class="item"></p> you will see the multi-columns properly laid out. Since you have overflow:hidden, you will be cropping whatever overflows from the 2nd grid column.


    Tarek Ayna www.BluGraphingCalculator.com Blu Graphing Calculator is Calculator ReImagined for Windows 8

    • Marked as answer by Song Tian Tuesday, November 20, 2012 9:52 AM
    Sunday, November 18, 2012 11:06 AM