Home / Layout / Responsive grid system with fixed gap
Responsive grid system with fixed gap

Responsive grid system with fixed gap

Download Demo
  • Overview
  • Documents
User Rating: 0/5 ( 0 votes)
Your Rating:

How many times did you have to deal with columns? And how often did you need layout that would be responsive? Pretty darn often, I bet. Fluid (responsive, adaptive) layout is today a default requirement when developing a website and, whether we want it or not, we somehow re-orient our thinking towards a tablet-like approach in working with website layouts.

So, the big deal is not making, let say,  two columns with gaps between them and making them fluid (putting their width in percentage). The tricky part is when your designer drives you crazy with the fact that the gap is changing along with the browser size. In that situation, it is useless to explain that 2% of 900px is way different than 2% of 600px. In a situation like this, you need something that will calculate widths for you.

Unfortunately, CSS is not yet ready for that task, so advanced techniques like CSS columns or box-sizing are not the best solutions (yet!), because we still have our good old friend Internet Explorer with an army of users. All this means only one thing: javascript. Well, what is better for on-the-fly calculations on client side than good old JS?

Scroll To Top