in Open Source, Technology

Grid – a minimal CSS Grid utility

Grid a simple and minimal fluid grid system that can flow inside any fluid or fixed container or play good with another Grid system. I found this to be particularly useful while working on liquid/fluid designs. Grid can also be used in conjunction with any other heavyweight CSS Grid Framework, particularly, in places where you do not want to calculate which portion of the grid does a design piece fall into or how many gutter should it have.

How to use it?

  • Add a class “grids” to any container.
  • Define your desired grid size by applying “gxofy” where “x” is the segment of the “y” whole.

Demo

Download/Source

Feedbacks would be appreciated.

Note: I’ve a new Photography WordPress Theme – Autochrome, which uses the Grid.

14 Comments

    • Sorry. I think I got lazy. Anyway, here is how you can try. In "style.css", change the width in body to 80% instead of 960px. Now try re-sizing your browser.

  1. Cool! I like to analyze these kind of CSS examples. A different way to interpret various development possibilities. Tks for sharing!

  2. nice one. I was wondering how do you get your png to render transparent in IE please?. the png in the right corner

    • I'm not sure which one you're referring to. However, there are lots of solutions for PNG in IE6 and above.

      • the top right corner. what solution did you use then?

Comments are closed.

Webmentions

  • The CSS Grid jQuery Plugin Aug 9, 2011

    [...] CSS grid frameworks are a handy solution for rapid development of page layouts. One minimal CSS grid framework that I have taken a liking to is Grid – a minimal CSS Grid utility. [...]

  • Weekly Design News – Resources, Tutorials and Freebies (N.95) Aug 9, 2011

    [...] Package Management ServiceBoxCss – A Simple Package Management ServiceHTML5 Video VotingGrid – A Minimal CSS Grid UtilityMake Your HTML Email 5½ Times More Mobile FriendlyCreating a PHP and CSS3 Powered About [...]

  • The Ultimate Collection of 50+ Resources for Grid Lovers | Design Shack Aug 9, 2011

    [...] Grid [...]

  • A simple, barebone grid system that can flow inside any fluid or fixed container or a parent grid system. | Speckyboy Design Magazine Aug 9, 2011

    [...] Direct Link [...]