|Number of watchers on Github||471|
|Number of open issues||3|
|Average time to close an issue||13 days|
|Average time to merge a PR||about 1 hour|
|Open pull requests||3+|
|Closed pull requests||4+|
|Last commit||over 2 years ago|
|Repo Created||about 4 years ago|
|Repo Last Updated||3 months ago|
|Organization / Author||mdo|
|Do you use table-grid? Leave a review!|
|View open issues (3)|
|View table-grid activity|
|View on github|
|Latest Open Source Launches|
Trendy new open source projects in your inbox! View examples
Every grid to date uses
floats or some
inline-block hackery. That's so 2013 though, and seeing that it's now 2014, we need something newer, faster, and stronger. So, Table Grid was born.
Check out the example on GitHub Pages at http://mdo.github.io/table-grid/. Clone this or download it to give it a whirl for yourself.
This isn't a serious project really, it's just an experiment. I'm curious about the rendering performance of using
display: table; as opposed to
display: inline-block;. Each option has pros or cons, but in particular I'm focused on the con part:
floats require clearing and I have zero idea about rendering performance. They're straightfoward and Just Work™.
flex-boxhas poor rendering last I heard because browsers have to do a lot of repainting to support it. I have no references to this, it's what I've heard. Plus, browser support and what not.
display: inline-block;is gnarly because it involves resetting
white-spaceand that's just silly. We shouldn't be resetting that kind of stuff just for a grid system.
So, based on that,
display: table; starts to sound kind of interesting. Table layouts, especially ones that include
table-layout: fixed; render super fast because browsers only need to render the first row of cells to paint the whole table. That's kind of moot with one row grids like this, but it might help anyway.
As always, there's a container, row, and a series of columns. It's responsive, too. More specifically:
.container, which has a
.grid. This sets up the table-based grid with
width: 100%;, and
.colbase class and an optional width class, like
.col-6. There are 12 available column classes, 1-12, for any variety of column combinations.
.colalone. Tables, baby!
display: table;works, there's no gutters. To add gutters, wrap the
.grid-padded, which adds gutters with
border-spacing: 1rem 0;. Sucks, but this is experimental.
All this can be seen in action on the demo page.
Table Grid has been rebuilt to use Sass (thanks, Jekyll!). Key CSS bits are broken down in
grid-basics.scsscontains the container and basic responsive, equal-width column support.
grid-columns.scsscontains specific column width classes for more granular control (e.g,
.col-6is 50% wide).
grid-extras.scssis for alignment and sorting options.
See http://mdo.github.io/table-grid/ for details on usage.
If you need a nuclear hardened grid system, check out Bootstrap. It's okay.
MIT, (c) Mark Otto 2014.
Archiving v1 with a release.