CSS Grid Help

[joshuaj]

I like the fact that IPS now has it's on responsive grid. I'm wondering how I can get the grid to properly wrap. I was reading the documentation and it stated that it will only wrap the grid if the spans are all equal. How does one get the spans to wrap properly with different spans?

 

<div class='ipsGrid'>
	<div class='ipsGrid_span3'>{template="widgetContainer" group="pages" app="cms" params="'col1', $widgets, 'vertical'"}</div>
	<div class='ipsGrid_span6'>{template="widgetContainer" group="pages" app="cms" params="'col1', $widgets, 'vertical'"}</div>
	<div class='ipsGrid_span3'>{template="widgetContainer" group="pages" app="cms" params="'col1', $widgets, 'vertical'"}</div>
	<div class='ipsGrid_span3'>{template="widgetContainer" group="pages" app="cms" params="'col1', $widgets, 'vertical'"}</div>
  	<div class='ipsGrid_span3'>{template="widgetContainer" group="pages" app="cms" params="'col1', $widgets, 'vertical'"}</div>
	<div class='ipsGrid_span3'>{template="widgetContainer" group="pages" app="cms" params="'col1', $widgets, 'vertical'"}</div>
	<div class='ipsGrid_span3'>{template="widgetContainer" group="pages" app="cms" params="'col1', $widgets, 'vertical'"}</div>
</div>

 

This is the code I'd like to implement, however; the third span_3 is having margin left issues and it doesn't display evenly. I was reading about data-ipsGrid , but I'm not sure exactly how it works in this case.

[TAMAN]

 

[joshuaj]

13 hours ago, TAMAN said:

 

I read this, but I'm not fully understanding how it works. I've added the

data-ipsGrid

but it automatically resizes all to span 3.

[TAMAN]

just remove the left margins? for example im working on this page here http://hellshammers.net/test2 using different spans and i also had to remove the margins