VGrid for CSS nerds

Here’s a little something I just whipped up for my own uses, but you might find it useful as well: vgrid.css, a CSS style sheet for handling vertical height of objects by em, as a sort of companion to the 960 grid. It’s got vgrid_x classes from 1 to 100; if you’re assigning onscreen elements to be more than 100 lines high, this probably isn’t the tool for you.

I mainly whipped it up for use with input forms with textareas, so that I could easily assign a height to textareas, but it’d probably be useful for other sorts of line-by-line layout as well. I just thought someone else might find it useful.

If you’d rather just cut and paste, the CSS is below:

.vgrid_1{ height: 1em; } .vgrid_2{ height: 2em; } .vgrid_3{ height: 3em; } .vgrid_4{ height: 4em; } .vgrid_5{ height: 5em; } .vgrid_6{ height: 6em; } .vgrid_7{ height: 7em; } .vgrid_8{ height: 8em; } .vgrid_9{ height: 9em; } .vgrid_10{ height: 10em; } .vgrid_11{ height: 11em; } .vgrid_12{ height: 12em; } .vgrid_13{ height: 13em; } .vgrid_14{ height: 14em; } .vgrid_15{ height: 15em; } .vgrid_16{ height: 16em; } .vgrid_17{ height: 17em; } .vgrid_18{ height: 18em; } .vgrid_19{ height: 19em; } .vgrid_20{ height: 20em; } .vgrid_21{ height: 21em; } .vgrid_22{ height: 22em; } .vgrid_23{ height: 23em; } .vgrid_24{ height: 24em; } .vgrid_25{ height: 25em; } .vgrid_26{ height: 26em; } .vgrid_27{ height: 27em; } .vgrid_28{ height: 28em; } .vgrid_29{ height: 29em; } .vgrid_30{ height: 30em; } .vgrid_31{ height: 31em; } .vgrid_32{ height: 32em; } .vgrid_33{ height: 33em; } .vgrid_34{ height: 34em; } .vgrid_35{ height: 35em; } .vgrid_36{ height: 36em; } .vgrid_37{ height: 37em; } .vgrid_38{ height: 38em; } .vgrid_39{ height: 39em; } .vgrid_40{ height: 40em; } .vgrid_41{ height: 41em; } .vgrid_42{ height: 42em; } .vgrid_43{ height: 43em; } .vgrid_44{ height: 44em; } .vgrid_45{ height: 45em; } .vgrid_46{ height: 46em; } .vgrid_47{ height: 47em; } .vgrid_48{ height: 48em; } .vgrid_49{ height: 49em; } .vgrid_50{ height: 50em; } .vgrid_51{ height: 51em; } .vgrid_52{ height: 52em; } .vgrid_53{ height: 53em; } .vgrid_54{ height: 54em; } .vgrid_55{ height: 55em; } .vgrid_56{ height: 56em; } .vgrid_57{ height: 57em; } .vgrid_58{ height: 58em; } .vgrid_59{ height: 59em; } .vgrid_60{ height: 60em; } .vgrid_61{ height: 61em; } .vgrid_62{ height: 62em; } .vgrid_63{ height: 63em; } .vgrid_64{ height: 64em; } .vgrid_65{ height: 65em; } .vgrid_66{ height: 66em; } .vgrid_67{ height: 67em; } .vgrid_68{ height: 68em; } .vgrid_69{ height: 69em; } .vgrid_70{ height: 70em; } .vgrid_71{ height: 71em; } .vgrid_72{ height: 72em; } .vgrid_73{ height: 73em; } .vgrid_74{ height: 74em; } .vgrid_75{ height: 75em; } .vgrid_76{ height: 76em; } .vgrid_77{ height: 77em; } .vgrid_78{ height: 78em; } .vgrid_79{ height: 79em; } .vgrid_80{ height: 80em; } .vgrid_81{ height: 81em; } .vgrid_82{ height: 82em; } .vgrid_83{ height: 83em; } .vgrid_84{ height: 84em; } .vgrid_85{ height: 85em; } .vgrid_86{ height: 86em; } .vgrid_87{ height: 87em; } .vgrid_88{ height: 88em; } .vgrid_89{ height: 89em; } .vgrid_90{ height: 90em; } .vgrid_91{ height: 91em; } .vgrid_92{ height: 92em; } .vgrid_93{ height: 93em; } .vgrid_94{ height: 94em; } .vgrid_95{ height: 95em; } .vgrid_96{ height: 96em; } .vgrid_97{ height: 97em; } .vgrid_98{ height: 98em; } .vgrid_99{ height: 99em; } .vgrid_100{ height: 100em; }

Leave a comment