Edge Case: Neat 2.0 + flexbox + justify-content: center + orphan children

[kgcreative]

Background:
I'm trying to achieve an auto-centering layout. Prior to this, the best way to achieve this was through nth-of-type and class wizardry. Primarily because i'd have to account for how many items exist, how many orphans, etc.

With Neat 2.0 + Flexbox, this is ALMOST solved.

The default neat grid allows for orphans to wrap left, and as I keep adding orphans, they automagically stack very nicely.

Adding Flexbox, this is even better, since it makes it so staggered grid-column items wrap without weird float issues. It's like adding an automagic clearfix every nth-of-type.

What I'm trying to achieve, then, is to extend this behavior further with flexbox, by adding justify-content: center to the parent container. This should, in theory, give me the result below.

However, because neat calculates it's floated position with margin-left, the actual result is this:

My current workaround involves fetching the current custom grid, and adding margin-left and margin-right (half margins) to the the grid-column object, but obviously this gets extremely repetitive and feels very hacky.

The only solution that comes to mind is adding a direction: center to the grid-media() custom map, which would somehow trigger margins to change from margin-left: $gutter; to margin-left: $gutter / 2 and margin-right: $gutter / 2, but that seems to have a lot of ramifications in terms of adding extra complexity to the grid.

thoughts?

[kgcreative]

As a workaround, I added the following to my flex-container mixin:

  @if ($_justify-content == center) and ($_grid == null) {
    $_gutter: _retrieve-neat-setting($neat-grid, gutter) / 2;
    @supports (display: flex) {
      transform: translateX(-$_gutter);
    }
  } @else if ($_justify-content == center) {
    $_gutter: _retrieve-neat-setting($_grid, gutter) / 2;
    @supports (display: flex) {
      transform: translateX(-$_gutter);
    }
  }

It's a little hacky, and definitely not DRY, but it's an ok workaround to the current behavior

[whmii]

Thank you for putting together such a comprehensive issue. It makes addressing it soooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo… oooooooooooooooooooo… ooo much easier.

So i thought I would be all clever ad be like "Aha, all you need to do is add padding to the container. Turns out if you do that it throws off all the percentage calculations 😭.

2nd option would be something like the following on the container…

  padding-right: $gutter;
  margin-left: -$gutter;
  width: calc(100% + $gutter);

but that would be more hacky than the transform…

I think the transform is ok, but you could also switch to relative positioning based on your needs.

The last way you could address this is with (i hate to say this…) nth child selectors here's an example of how this works:

$neat-grid: (
  columns: 12,
  gutter: 20px,
);

.grid {
  @include grid-container;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.grid__column:nth-child(13),
.grid__column:last-child {
  margin-right: 20px;
}


.grid__column {
  @include grid-column(1);
}

This creates a margin right on the last object in the row and the last object in the container which causes the flexbox to self correct.

Deciding which of the 3 solutions to use depends on your needs but unfortunately I dont see a way to include this in to the framework itself.

[kgcreative]

Huh... the last solution feels a lot like an edge case omega() mixin. I might release that as a stand-alone enhancement for this use case, ala Josh Fry's omega-reset() for neat 1.x

[kgcreative]

Need to add some documentation and test the hell out of it, but https://github.com/kgcreative/neat-omega seems to solve the issue.

[whmii]

Nice work! fair warning, I think this is too specific a need to make it in the core library but it makes an awesome extension. 👍

[kgcreative]

I've updated https://github.com/kgcreative/neat-omega.

As I was experimenting with layouts, found another edge case where, in the case of non-flexbox floated layouts, if the last element is a row is shorter than the other elements, the float doesn't properly clear all the way.

I've amended the omega mixin to also account for this behavior, essentially covering 2x edge cases in one.

I still don't know that this is enough to bring back 1.8 style omega behavior to the core library, but I've gone ahead and released this under MIT license as a stand-alone extension