griid usage

  1. Three types of rows are supported

    A. Automatic equal-width cells, filling one entire row.

    <div class="griid">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
</div>
    1
    2
    3
    4
    5
    6
    7

    B. Automatic equal-width cells, with a specified number of columns per row.

    <div class="griid-COUNT">
    <div class="cell">...</div>
    <div class="cell">...</div>
    ...
</div>

    where COUNT is an integer between 2 and @griid-max_equal_columns (inclusive). All cells will be the same width, 1/COUNT the width of the row.

    For example:

    <div class="griid-3">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
    <div class="cell">9</div>
    <div class="cell">10</div>
</div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    (Note the in this demo cells have an 1px outline, which is why the orphan cell appears misaligned)

    C. Cell fractional width specified on a per-column basis, with under-full rows aligned centered.

      <div class="griid">
    <div class="cell-X-N">...</div>
    ...
</div>

    where X is an integer less than N, and N is an integer between 2 and @griid-min_fractional_width (inclusive). Cells will be X/N the width of the row. Cells' widths are independent of each other.

    !Important: Because the styles don't know what cell widths you've used, you must add .row-end to the last cell of each row

    <div class="griid">
    <div class="cell-1-6">1</div>
    <div class="cell-1-3">2</div>
    <div class="cell-1-6">3</div>
    <div class="cell-1-3 row-end">4</div>
    <div class="cell-1-1">5</div>
    <div class="cell-1-2">6</div>
    <div class="cell-1-4">7</div>
    <div class="cell-1-4 row-end">8</div>
    <div class="cell-2-5">9</div>
    <div class="cell-3-5 row-end">10</div>
    <div class="cell-2-5">11</div>
</div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    (Note the in this demo cells have an 1px outline, which is why the orphan cell appears misaligned)

    Full-width cells are cell-N-N or cell-full, and do not require row-end

  2. For multi-row grids (B and C), columns are separated by @griid-cell_spacing and rows are separated by @griid-row_spacing

  3. In all cases, cells are vertically centered.

Acknowledgements:

This started as a modification of Joel Sutherland's "grid-items" grid system