This site uses cookies. Read privacy policy. Click exit to agree×

NegativeGrid – a CSS grid approach for creating slideshows and accordions

NegativeGrid logo

NegativeGrid is a simple grid system for making slideshows and accordions.

By using negative margins horizontal posion of elements no longer depends on the position of adjacent elements but it’s calculated from the left side of container. This technique lets you easily change the position of an item in stack by simply pushing in more from the left. Play with the demo to see it in action.

  • Vam
    Does not work properly in opera ((

    • Chris Planeta

      This is a known bug in Opera browsers connected with improper rounding of percentages. All the other fluid grid systems I’ve checked have problems in Opera. In comparison to them the NegativeGrid however makes these differences much smaller (check e.g. Fluid 960 Grid System in Opera – click “16 column grid”).

      Unlike other solutions where the position of one block depends on the block next to it in the NegativeGrid the position of columns is calculated from the left border of the page (thanks to the use of negative margins, thus the name).

  • Jon

    NegativeGrid worked great for me. Very simple and intuitive. Thank you.

    • Jon

      Actually I’ve run into a problem. Wondering if you have a suggestion. I’ve got some images within the grid and when I attempt to expand them using a lightbox script it won’t work. I’ve been able to determine that body>div{overflow:auto;} is the problem. Any ideas how to resolve?
      Thank you.

    • Chris Planeta

      Ok, it seems that you have not read carefully the last notice in the generator and generated code that was used in the demo (that is where body>div is used) by pressing “Cancel”. In production there should be no thing like body>div. Instead you should add “overflow:auto” to every container wrapping each set of your columns.

  • Thomas

    I checked out your negative grid approach and it works fine for me. I especially like the minimal amount of code.
    I wonder what will be a best practical way of having one long sidebar on the left side, while having many shorter rows of 2, 3 or 4 on the right side.
    Is there an easy, planned way to do this with your system?
    Thanks for your reply in advance.
    Regards, Thomas

    • Chris Planeta

      Hi there Thomas. I’m glad that you liked my system.

      one long sidebar on the left side, while having many shorter rows of 2, 3 or 4 on the right side

      Hmm… I’m not sure what you mean by that. Do you want rows to take space of 2, 3 or 4 columns? How will they be distributed? Give me a link to an image of what you would like to achieve and I will try to help you.

  • Thomas

    Hi Chris,
    I mean just a normal layout with a sidebar, like this:

    Of course, I can work my way to build this with my own floats. I just wanted to be shure before, if I not somehow miss an easy way with the classes you’ve provided.


  • Thomas

    Yeah, that’s damn simple.
    Give the sidebar a class .push0 and omit the .push0 for the rows and use a higher push class instead.
    I like it!
    Thanks for the example and a have a happy new year.