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

  • By Mark Otto
  • Last update: Nov 21, 2022
  • Comments: 4

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 nestable—just 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.

Github

https://github.com/mdo/table-grid

Comments(4)

  • 1

    Great !!!

    Great! A full complete grid with just a few line of css.

    However you must be clean in the example that you have only 2 possibile use:

    a) the template: 1, 1, 1, 1, 1 on mobile (600px) b) the grid on large then 600px

    using table i don't think you can have different breakpoints at custom size, isn't it?

  • 2

    Scss support

    Hi, I'm a little experimenting with display: table And it's really cool stuff that lets you do a lot of interesting things. I think of in order to make a complete analog bootstrap grid on scss and then the other preprocessor I think it should be very interesting. How do you like the idea?

  • 3

    "Tables are super impractical for grids ...

    "Tables are super impractical for grids because there is no perf gain when using table-layout: fixed;, a property that tells the browser to only scrape a table's first row of cells to determine every cell's width for super fast rendering." – css-perf

    I'm wondering why you say they're "super impractical", yet you have this project here. I've been using CSS tables for layout for years, and I haven't found them to be bad at all. Could you explain you reasoning?

  • 4

    Major overhaul of the CSS and structure

    This update includes:

    • Major overhaul and reformatting of the grid system using sass.
    • Added a package.json and gulp file
    • Added a new update.html file in the layouts folder explaining the changes.

    Disclaimer: I am really new to Github and Markdown (this is my first project) so my examples are just in plain html for now. I am also open to suggestions on how I can do things better! I've spent quite a bit of time reformatting this 'experiment' as I believe it could potentially be my new go-to grid system for future web projects. I also think it has huge potential for being a game-changer as far as grid systems go.

    I was really happy to find this actually as I have been meaning to test run a display:table based grid system for a while now. I use bootstrap daily and whilst it's awesome I have found display:table generally easier and quicker to work with rather than using other solutions.

    Basically if I could write a love letter to display:table I would. <3