

Ultra minimal CSS grid utility - Brajeshwar
http://brajeshwar.github.com/grid/
Grid is a simple and minimal fluid grid system that can flow inside any fluid or fixed container or co-exist nicely with any other heavyweight grid system.
======
Breefield
Am I the only one that doesn't understand everyone's obsession with CSS grids?
I mean, I understand why grids are an important part of design, don't get me
wrong. I use grids and I try to adhere to a baseline, but I don't actually
formalize this into my markup. I keep that formatting strictly in the CSS. If
you're going to use a CSS grid, this formatting spills over into your HTML via
those dorky ambiguous classnames that really remind me of Dreamweaver.

I'm sure this "grid.css" is great, really concise, etc. But do we really need
to be using it? I like to type out comments on HN and never hit "add comment,"
today I will.

~~~
zyb09
As far as I know, there's some holy war against <table>s going on, so people
rather write tons of obscure CSS code, which becomes instantly impossible to
understand the moment you write it and probably renders 10 times as slow in
any browser, than to just use tables.

~~~
pistoriusp
I had to do a double take on your comment because that holy war ended a very
long time ago and with very good reasons.

Here's a pretty good summary: [http://stackoverflow.com/questions/83073/why-
not-use-tables-...](http://stackoverflow.com/questions/83073/why-not-use-
tables-for-layout-in-html)

~~~
jules
The responses that use valid arguments (i.e. not "it will harm your
professional reputation to use tables! or tables are for tabular data! or I
can bill more hours if I use CSS!") pretty much agree that the arguments
against tables don't hold much water.

The _only_ argument that might be important against tables that I could see is
that they work less well with screenreaders. Can anyone using a screen reader
confirm or deny this? I could easily see it being the other way around,
because with tables a screen reader will let you quickly navigate to different
parts of the page (e.g. sidebar to header to main content by going left,
right, up and down instead of painstakingly navigating over a bunch of text).

On the other hand, tables are easier to use, more flexible, more predictable
across browsers, and more readable. Just look at the years and years of
research it took the CSS experts at e.g. Alistapart to replicate layouts that
are trivial with tables using CSS.

Examples:

<http://www.alistapart.com/articles/fauxcolumns/>

<http://www.alistapart.com/articles/fauxabsolutepositioning/>

<http://www.alistapart.com/articles/multicolumnlayouts/>

<http://www.alistapart.com/articles/negativemargins/>

And even then it doesn't always work:
<http://www.satzansatz.de/cssd/hgjump.html>

Note that these layouts are utterly trivial to create with tables.

~~~
tonyarkles
They also don't work very well if you're trying to build a site that looks
decent on a mobile browser... You can do some cool CSS tricks to facilitate
different screen sizes. See <http://cssgrid.net/> for an example (resize your
browser window and see how things change)

------
huckfinnaafb
This still suffers from the rounding error seen here
[<http://i.imgur.com/DXjVN.png>].

Otherwise, yup... it's a grid. Looks like they're setting the grid elements to
display:inline... which seems weird and unnecessary to me? Block elements
don't belong inside inline elements.

I hate to keep posting this, but I've been unable to find fault with this grid
[[https://github.com/stubbornella/oocss/blob/master/core/grid/...](https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css)]
code. .lastUnit spans the pixel gap on the rightmost, nestable, extendable,
fluid widths.

The two are mostly the same idea, but I think the OOCSS project implements it
better and works with more browsers.

~~~
JoelSutherland
IE6 has a double-margin bug on floated elements which is fixed by display:
inline;

[http://www.positioniseverything.net/explorer/doubled-
margin....](http://www.positioniseverything.net/explorer/doubled-margin.html)

CSS defines style, HTML defines the semantics. The semantics of a div or an h1
don't change if you declare them inline in your CSS. So there is nothing wrong
putting inline elements (styled as block) inside block elements.

HTML5 blurs this further as you can now wrap pretty much anything with <a>.

------
netghost
One thing I would note, if you use "box-sizing: border-box" you can include
borders (transparent if you want gutters) and padding without any float drops.

I wrote up an example here:
<http://monkeyandcrow.com/blog/splitting_the_difference/>

------
voidfiles
Seriously, lets take a step back and ask our selves do we need another CSS
grids. As far as I can tell there are like 3 methods to grids.

Blueprint type grids(<http://www.blueprintcss.org/>), OOCSS/YUI2
(<https://github.com/stubbornella/oocss/wiki>), and YUI3
(<http://developer.yahoo.com/yui/3/cssgrids/>).

Why create new grids, lets make the old ones better, or explore new uses for
them. Like many on this post I can't imagine there are very many good ways to
go about this.

------
dools
This is pretty nice but it's still using floats. Check out
<http://stacklayout.com/> for an example achieving a practically identical
result using display:inline-block

------
jules
We're getting one step closer to tables again. One day people will realize
that all the extra effort in doing this in CSS is worthless and just use
tables. Who cares that your layout is made with tables instead of divs? Mixing
presentation with content? We already have a much better solution for that,
it's called server side templates. Just use what requires the least amount of
work, for some things that will be CSS for other things that will be tables.
Don't get hung up in cargo cult design.

