Adding dynamic number of columns and not using reset classes

[johnhaldson]

First let me say that I love ResponsiveBP (i call it responsiveBP to avoid the ambiguity), I have used it on a number of projects in the last year and prefer it to many of the other frameworks I've tried by far.

One pain point I have encountered is the dreaded dynamic number of columns and inherit margin-left on subsequent columns breaking the layout.

Take the following:

<div class="row">
    <div class="col-xs-6 col-m-3"></div>
    <div class="col-xs-6 col-m-3"></div>
    <div class="col-xs-6 col-m-3"></div>
    <div class="col-xs-6 col-m-3"></div>
</div>

This layout will not render properly without a .reset-xs added to the 3rd div inside. You will run into this problem frequently soon as you start integrating into your cms or application code.

Right now I am overcoming this using javascript and matchmedia to check the breakpoint and add and remove the reset classes accordingly, something along the lines of:

if (window.matchMedia('(max-width:47.99em)').matches) { 
    $('.col-xs-6:nth-of-type(2nd+1)').addClass('reset-xs');
} 
else if (window.matchMedia('(min-width:48em)').matches) { 
    $('.col-xs-6:nth-of-type(2nd+1)').removeClass('reset-xs');
}

Is there a better way around this that I'm missing in ResponsiveBP? Furthermore, could you point me in the right direction of the code that one could adjust to overcome this?

I suspect this may require a great deal of re-work to the grid system itself but would love to hear what others think about having out of the box support for this.

[JimBobSquarePants]

Hi there,

Thanks for raising this and thanks for your support! With the current version you need to use reset classes for displaying dynamic columns. I generally calculate that when rendering a view in the cms using a counter within a for loop. Adding automatic resets could also mess with offset and reverse column overloads.

V4 Will have what I call a block grid function though. Columns of equal widths that automatically reset. They have overloads for each level and have all three modes for choosing the gutter. Here's a demo.

Rendering them out will be very easy also. This renders different column count for each level.

<div class="block-row-xxs-2 block-row-xs-3 block-row-s-4 block-row-m-5 block-row-l-6">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>