Some kind of .wrap-around or .multiline class?

[parkr]

I'm reworking the jekyll-import site and using a grid to list the importers:

The first item has no padding due to:

.unit .unit:first-child { padding-left: 0; }

The first .unit within my nested .grid has no left padding, but all the others have a great, nice gutter as expected.

Perhaps a .grid.multiline class could add this padding back or remove the nth child's padding? Like every 4 items gets no left padding for the .w-1-4.

[cobyism]

Yeah, so far the onus has been on whatever/whoever is creating markup for gridism to ensure that there is never more .units in a .grid than 100%. For example, as soon as the combination of units in a grid "row" goes over what will fit on a single horizontal line (in inline-block terms), the gutters and padding will start to break.

Originally I thought the way around it would be to conditionally add in the outer gutters using .unit:nth-child(3) { … } selectors and so forth, but that gets messed up in any scenario where you’re not using the units of the same width the whole way through your layout (e.g. using a .one-third next to a .two-thirds would offset all remaning units lower in the layout by one, so the gutters would be applied to the wrong units). I haven’t come up with a good all-round solution yet because it’s so hard to find something generic that works in every way you can combine things, but I’m open to suggestions if you have any.

From the screenshot you’ve posted, a temporary solution in this use-case might be to simply apply the .no-gutters utility class on the parent .grid container, which will just mean that none of the units get any padding/gutters. Does that help?