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.

  • Monkeytail

    The demo doesn't show the fluid effect.

    • http://brajeshwar.com Brajeshwar

      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.

  • Pingback: A simple, barebone grid system that can flow inside any fluid or fixed container or a parent grid system. | Speckyboy Design Magazine()

  • Vigneshwar Raj

    Good one ... !!!

  • http://twitter.com/ed1nh0 ed1nh0™

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

  • http://twitter.com/FrontendInsight Frontend Insights

    Great job keeping it simple, lightweight and flexible!  I test drove Grid this morning and posted an article about it on http://www.javascripthtmlcss.com.

  • Abjsaberi

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

    • http://brajeshwar.com Brajeshwar

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

      • Abjsaberi

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

  • http://www.polmoneys.com Pol Moneys

    excelent, you'll be in my stylesheets from now on! thanks for sharing

    • http://brajeshwar.com Brajeshwar

      Thanks

  • http://www.ambitiousceo.tumblr.com/ Edward Agyeman

    No tumblr theme? :)

    • http://brajeshwar.com Brajeshwar

      Do you mean Autochrome theme for Tumblr?

      • http://www.ambitiousceo.tumblr.com/ Edward Agyeman

        Yep.
        Sent via BlackBerry
        http://about.me/EdwardAgyeman

        • http://brajeshwar.com Brajeshwar

          Will keep that in mind. Thanks for the suggestion.

  • Pingback: The Ultimate Collection of 50+ Resources for Grid Lovers | Design Shack()

  • Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.95)()

  • Pingback: The CSS Grid jQuery Plugin()