Variable-width repeating section rows

Is there some CSS magic I can use to have rows of a repeating section take up either 50% or 100% of the width of the parent container, based upon an attribute in that row? I can't seem to figure out how to do that.

Based on an attribute of that row? No, at least not directly. Manipulating the width of a repeating section item requires modifying the properties of the .repitem element, which is the parent of the elements in the row. Instead of manipulting the repitem's width, however, you could make it an inline element (eg, display: inline-block), and manipulate the total width of its children. Something along these lines (untested): <fieldset class="repeating_example"> <input type="checkbox" name="attr_shrink" class="sheet-shrink"> <div class="sheet-repitem-body"> Lorem ipsum dolor sit amet </div> </fieldset> .repitem, .sheet-repitem-body { display: inline-block; } .sheet-repitem-body { width: calc(100% - 15px); } .sheet-shrink:checked + .sheet-repitem-body { width: calc(50% - 15px); }

That's precisely what I was looking for!* *Well, almost. I had tried a similar setup with inline-block for the repitem div before (which does not work), but your suggestion made me try inline instead, which ended up working. Thanks!

Meh, celebrated too early. display:inline messes up the itemcontrols in editmode :(.

<div class="sheet-section-name"> <fieldset class="repeating_example"> <input type="checkbox" name="attr_shrink" class="sheet-shrink"> <div class="sheet-repitem-body"> content </div> </fieldset> </div> .sheet-section-name .repcontainer { display: flex; flex-wrap: wrap; } .sheet-shrink:not(:checked) + .sheet-repitem-body { width: 100%; } .sheet-shrink:checked + .sheet-repitem-body { width: 50%; } That should do it.