table-grid

Simple CSS grid system using `display: table;`.

Subscribe to updates I use table-grid


Statistics on table-grid

Number of watchers on Github 443
Number of open issues 2
Average time to close an issue 13 days
Main language CSS
Average time to merge a PR about 1 hour
Open pull requests 2+
Closed pull requests 4+
Last commit over 1 year ago
Repo Created over 3 years ago
Repo Last Updated about 2 months ago
Size 29 KB
Homepage http://mdo.github...
Organization / Authormdo
Latest Releasev1.0.0
Contributors3
Page Updated
Do you use table-grid? Leave a review!
View open issues (2)
View table-grid activity
View on github
Latest Open Source Launches
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating table-grid for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Table Grid

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.

Wtf

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 floats, flex-box, or 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-box has 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-space and 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.

How it works

As always, there's a container, row, and a series of columns. It's responsive, too. More specifically:

  • Center the site contents with .container, which has a max-width: 940px;.
  • Wrap a row of columns with .grid. This sets up the table-based grid with display: table;, width: 100%;, and table-layout: fixed;.
  • Columns get the .col base class and an optional width class, like .col-1 or .col-6. There are 12 available column classes, 1-12, for any variety of column combinations.
  • Grid width class is not required. Without them, all columns become equal width via .col alone. Tables, baby!
  • Grids are nestablejust place a new .grid within any .col. Bam.
  • By default, because of how display: table; works, there's no gutters. To add gutters, wrap the .grid in .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.

What's included

Table Grid has been rebuilt to use Sass (thanks, Jekyll!). Key CSS bits are broken down in _sass:

  • grid-basics.scss contains the container and basic responsive, equal-width column support.
  • grid-columns.scss contains specific column width classes for more granular control (e.g, .col-6 is 50% wide).
  • grid-extras.scss is for alignment and sorting options.

See http://mdo.github.io/table-grid/ for details on usage.

Fuck you, where's the real grid?

If you need a nuclear hardened grid system, check out Bootstrap. It's okay.

License

MIT, (c) Mark Otto 2014.

table-grid open pull requests (View All Pulls)
  • update(grid-extra.scss): Adding word-wrap property in case the word l…
  • Major overhaul of the CSS and structure
table-grid questions on Stackoverflow (View All Questions)
  • Slickgrid does not render or populate the JSON data in table / Grid
  • how to format this model data table grid into a chart
  • how to repeat the header and footer in table grid for print preview in angularjs
  • How to use operators between table grid column and datetime in C#?
  • jQuery function doesn't print table grid how I think it should
  • 2D Data Table / Grid View in C#?
  • How to create random table grid wtih php?
  • Responsive table (Grid) with pinned (frozen) left column and header row
  • PHP echo images in table/grid
  • Simple_Form. Display checkboxes in a table/grid format
  • how to create table grid view fix header with long title name using only CSS?
  • Tree(graph) spanned on/inscirbed in table/grid
  • AngularJS - watch column in table grid
  • Protractor: How to check if the table/grid is populated?
  • inline edting table / grid for for MVC
  • Where can I find an implementation for a text/ascii table/grid generator?
  • Product Specification in table grid view in magento..!
  • Responsive table grid
  • Bootstrap Nested Table(Grid)
  • How to generate click able table grid using Javascript
  • Creating a table/grid with a frozen column and frozen headers
  • Create table / grid in a Wireframe Visio 2010 diagram
  • SSRS report with each category a separate table/grid
  • Spring MVC Dynamic Data Table/Grid inside a form using Jquery
  • Paging In MVC Table Grid
  • how to find items on a table Grid using WATIN
  • How to create a 1px border-collapsed table grid that resizes properly even if zoomed
  • Adding a new column in a table(grid) using displaytag
  • MVC table grid post form and read line by line
  • Sending a table/grid object over AJAX
table-grid list of languages used
table-grid latest release notes
v1.0.0 v1.0.0

Archiving v1 with a release.

Other projects in CSS