br1o / chewinggrid

An ideal CSS Grid for card design, made with flexbox & love

ChewingGrid

An ideal CSS Grid for card design:

• Adapt to any layout, there is no media-query
• Fluid card size, thanks to Flexbox (<3) or the float fallback
• Minimum & maximum width on card

You can play with it: Live demo!

Index

1. Quick start

2. Limit the column number

3. Set a minimum card width

4. Set a maximum card width

5. Prevent last row expansion

6. [How to Contribute] (#how-to-contribute)

7. [Author & Community] (#author--community)

8. Quick start

---

Install ChewingGrid via bower and add it to bower.json dependencies

bower install chewing-grid --save

Let sart with the minimum markup:

<link rel="stylesheet" type="text/css" href="build/chewing-grid-atomic.css"/>
<div class="chew-row">
    <div class="chew-cell">1</div>
    <div class="chew-cell">2</div>
    <div class="chew-cell">3</div>
    ...
</div>

2. Limit the column number

---

Add the chew-row--{n} markup, to set the column limit:

<!-- 4 columns maximum -->
<div class="chew-row chew-row--4">
    <div class="chew-cell">1</div>
    <div class="chew-cell">2</div>
    <div class="chew-cell">3</div>
    ...
</div>

Or add a percent flex-basis and a width on cell:

.chew-cell {
    flex-basis: 25%; /* 4 columns */
    width: 25%; /* float fallback */
}

3. Set a minimum card width

---

Override the default minimum width (200px) by adding this CSS rule:

.chew-row {
    min-width: 300px
}

4. Set a maximum card width

---

Add the chew-card markup:

<div class="chew-row">
    <div class="chew-cell">
        <div class="chew-card">1</div>
    </div>
    <div class="chew-cell">
        <div class="chew-card">2</div>
    </div>
    <div class="chew-cell">
        <div class="chew-card">3</div>
    </div>
    ...
</div>

Override the default maximum width (300px) by adding this CSS rule:

.chew-card {
    max-width: 400px
}

5. Prevent last row expansion

---

Add some chew-cell--ghost markup.

<div class="chew-row chew-row--3">
    <div class="chew-cell">1</div>
    <div class="chew-cell">2</div>
    <div class="chew-cell">3</div>
    ...
    <div class="chew-cell chew-cell--ghost"></div>
    <div class="chew-cell chew-cell--ghost"></div>
</div>

You have to add at least column-max-count - 1 items.

How to Contribute

1. Star the project!
2. Report a bug that you have found.
3. Tweet and blog about ChewingGrid and Let me know about it.
4. Pull requests are also highly appreciated.

Author & Community

ChewingGrid is under MIT License.
It was created & is maintained by Thomas ZILLIOX.