Creating a CSS Grid

Question

So this is my first time asking a question here- I usually find or hack out a solution some other way. Anyway, I'm making a grid based site (entirely composed of visible equal sized tiles), and I need it to be responsive, i.e the number of rows and columns adjust depending on how the broswer is resized, and in-between those dramatic adjustments, the tiles are simply fluid. And I need the tiles to be seamless- I can't place any border between them. My issue is that most browser widths don't divide evenly into neat even-pixeled rows and columns. I'm thinking of using JavaScript to detect and calculate the unused space on each side, and add that amount to a random row and column. Is there a better way to approach this? Thanks so much for any suggestions you can offer!

Here's my code at present (I didn't include my solution because I deemed it far two hacky, tedious, and error-prone).

.tile {
    width:14.2857%;
    height:14.2857%;
    margin:0;
    padding:0;
    float:left;
}

    <div id="macroTile">
        <div id="firstRow">
            <div id="tileZeroZero" class="tile"><p>(0, 0)</p></div>
            <div id="tileZeroOne" class="tile"><p>(0, 1)</p></div>
            <div id="tileZeroTwo" class="tile"><p>(0, 2)</p></div>
            <div id="tileZeroThree" class="tile"><p>(0, 3)</p></div>
            <div id="tileZeroFour" class="tile"><p>(0, 4)</p></div>
            <div id="tileZeroFive" class="tile"><p>(0, 5)</p></div>
            <div id="tileZeroSix" class="tile"><p>(0, 6)</p></div>
        </div>

        <div id="secondRow">
            <div id="tileOneZero" class="tile"><p>(1, 0)</p></div>
            <div id="tileOneOne" class="tile"><p>(1, 1)</p></div>
            <div id="tileOneTwo" class="tile"><p>(1, 2)</p></div>
            <div id="tileOneThree" class="tile"><p>(1, 3)</p></div>
            <div id="tileOneFour" class="tile"><p>(1, 4)</p></div>
            <div id="tileOneFive" class="tile"><p>(1, 5)</p></div>
            <div id="tileOneSix" class="tile"><p>(1, 6)</p></div>
        </div>

        <div id="thirdRow">
            <div id="tileTwoZero" class="tile"><p>(2, 0)</p></div>
            <div id="tileTwoOne" class="tile"><p>(2, 1)</p></div>
            <div id="tileTwoTwo" class="tile"><p>(2, 2)</p></div>
            <div id="tileTwoThree" class="tile"><p>(2, 3)</p></div>
            <div id="tileTwoFour" class="tile"><p>(2, 4)</p></div>
            <div id="tileTwoFive" class="tile"><p>(2, 5)</p></div>
            <div id="tileTwoSix" class="tile"><p>(2, 6)</p></div>
        </div>

        <div id="fourthRow">
            <div id="tileThreeZero" class="tile"><p>(3, 0)</p></div>
            <div id="tileThreeOne" class="tile"><p>(3, 1)</p></div>
            <div id="tileThreeTwo" class="tile"><p>(3, 2)</p></div>
            <div id="tileThreeThree" class="tile"><p>(3, 3)</p></div>
            <div id="tileThreeFour" class="tile"><p>(3, 4)</p></div>
            <div id="tileThreeFive" class="tile"><p>(3, 5)</p></div>
            <div id="tileThreeSix" class="tile"><p>(3, 6)</p></div>
        </div>

        <div id="fifthRow">
            <div id="tileFourZero" class="tile"><p>(4, 0)</p></div>
            <div id="tileFourOne" class="tile"><p>(4, 1)</p></div>
            <div id="tileFourTwo" class="tile"><p>(4, 2)</p></div>
            <div id="tileFourThree" class="tile"><p>(4, 3)</p></div>
            <div id="tileFourFour" class="tile"><p>(4, 4)</p></div>
            <div id="tileFourFive" class="tile"><p>(4, 5)</p></div>
            <div id="tileFourSix" class="tile"><p>(4, 6)</p></div>
        </div>

        <div id="sixthRow">
            <div id="tileFiveZero" class="tile"><p>(5, 0)</p></div>
            <div id="tileFiveOne" class="tile"><p>(5, 1)</p></div>
            <div id="tileFiveTwo" class="tile"><p>(5, 2)</p></div>
            <div id="tileFiveThree" class="tile"><p>(5, 3)</p></div>
            <div id="tileFiveFour" class="tile"><p>(5, 4)</p></div>
            <div id="tileFiveFive" class="tile"><p>(5, 5)</p></div>
            <div id="tileFiveSix" class="tile"><p>(5, 6)</p></div>
        </div>

        <div id="seventhRow">
            <div id="tileSixZero" class="tile"><p>(6, 0)</p></div>
            <div id="tileSixOne" class="tile"><p>(6, 1)</p></div>
            <div id="tileSixTwo" class="tile"><p>(6, 2)</p></div>
            <div id="tileSixThree" class="tile"><p>(6, 3)</p></div>
            <div id="tileSixFour" class="tile"><p>(6, 4)</p></div>
            <div id="tileSixFive" class="tile"><p>(6, 5)</p></div>
            <div id="tileSixSix" class="tile"><p>(6, 6)</p></div>
        </div>
    </div>

See if Masonry could work, sounds like it will: http://www.jsdb.io/view/masonry — Sophisticake, May 21 '14 at 18:50
This answer can help you : http://stackoverflow.com/a/20457076/1811992 it describes a way of making a responsive grid of squares from scratch only with CSS. This answer describes a way of keeping the same margin between elements based on media quieries :http://stackoverflow.com/a/23352245/1811992 — web-tiki, May 21 '14 at 18:59
Bootstrap :) its already built for exactly what you described. — John Carroll, May 21 '14 at 19:14

score 0 · Answer 1 · answered May 21 '14 at 19:10

I have used a jQuery plugin for this called vgrid (https://github.com/xlune/jQuery-vGrid-Plugin). It works very well and responds to the browser width to rearrange the tiles. It can also handle tiles with different heights. Here is their demo page that is similar to what you asked for: http://blog.xlune.com/2009/09/vgrid/demo008.html

From what I can tell your sample html should work with that grid as-is

Creating a CSS Grid

1 Answers1