better way of handling gap/gutter

[fxck]

Currently when you want to have a grid of items with gutter between them, this happens https://plnkr.co/edit/eEWOqBJA4rq0PFKl1XyT?p=preview (unless there's some different hidden way of doing gaps other than the obvious fxLayoutGap.. I swear I've seen some calc example somewhere, but can't find it again)..

but ideally you'd want 4 items(25% each) in a row like this

There's a simple method for this which has been used for grid systems all over the place(and works fine with flex as well) and that is using negative margin on the container and padding on items(see https://plnkr.co/edit/ZhNvWutftQ1qRMO6cHzZ?p=preview)

the only real downside is that you have to use fxFlex elements only as a "container" for your content(ie. you can't add background or horizontal paddings to them)... but it's much more performant than say calc and much more usable than the way fxLayoutGap currently works. Could it perhaps be added as a new attribute, say fxLayoutGutter?

[ThomasBurleson]

See our JSFiddle Grid example here: https://tburleson-layouts-demos.firebaseapp.com/#/stackoverflow that shows how to achieve cell-aligned layouts.

[fxck]

@ThomasBurleson oh yes, that's the calc example I was looking for. But anyway, I have a couple of "problems" with that.

• it feels a little bit hacky and counterintuitive from api standpoint
  • not using fxLayout
  • not using fxLayoutGap which to me, feel like a very obvious thing to use when I want a gap, especially given that it does some sort of manually setting or margin depending on the position of the element
  • there seems to be a lot of manual "work" in css required https://github.com/angular/flex-layout/blob/master/src/demo-app/app/stack-overflow/columnSpan.demo.css#L35-L48
• that gap is defined on two places(in css and then in calc in fxFlex), so it's gonna be harder to control
• it's using calc, which I'd like to avoid if possible, maybe it's not that much of a problem nowadays, but it used to have performance problems at reflows

This use-case is basically a definition of a grid system to me(like bootstrap grid, inuit layouts etc), it should be pretty straightforward, wouldn't this https://plnkr.co/edit/ZhNvWutftQ1qRMO6cHzZ?p=preview be worth considering adding as an option? I could try and make a PR..

[fxck]

@ThomasBurleson here's a rough idea of how it could work fxck@1fd4881 I think it only makes sense for row/row-reverse direction, so it should probably be turned off or not turned on at all when the direction is anything other than those.. and then there's the little disadvantage that you can't really put much styling on neither fxLayout element not fxFlex elements(border, backgrounds), but that's easily fixable by putting those to child elements(as shown in demo).. but I think the payoff is still there, it's much more straightforward and easier to use than those calcs.

[MystK]

I'm running into this issue also.

Using flex-layout, I assumed that I wouldn't need to use flex css.

I was under the assumption that fsLayoutGap would achieve this "grid" layout when I set fxLayoutWrap to wrap.

Unfortunately, it only adds margins to the right when fxLayout is row or bottom when fxLayout is column.

Is there any timeline to add this feature to flex-layout or is the recommended solution to combine vanilla css and flex-layout?

[fxck]

@ThomasBurleson can we talk about this? I'm up for trying to implement this, but I feel you are still not quite on board with the idea itself

[miguelcaravantes]

my solution is this

.gap
{
margin-right: -15px;
margin-left: -15px;
}

.gap > *
{
padding-right: 15px;
padding-left: 15px;
}

/* if use material 2 components */
.gap .mat-input-underline
{
width: calc(100% - 30px);
}

[niwrA]

I also came here because I was surprised that fxLayoutGap only considered left-right, not up-down gaps ...

[mackelito]

@ThomasBurleson will this get some love and attention any time soon?

[ChristianLieven]

I've found myself running into the same issues, and it has been about a month now since the last comment so I'm giving this another friendly bump.

[stellasoft-will]

not sure if anyone has considered this

<div fxLayout="row" fxLayoutAlign="start" fxLayoutGap="20px" fxLayoutWrap>
       <div [ngStyle.gt-sm]="{'max-width': 'calc(25% - 20px)'}" fxFlex="calc(25% -20px)"></div>
</div>

managed to get this to work for me, by using their upgraded ngStyle attribute i can still use the break points while also maintaining the layout i want. example above would be 4 column grid at gt-sm sizes but gt-sm can be replaced as suits.

[simeyla]

How do I see the source code for any of these demos? Honestly this project has some of the worst documentation I've seen in a long time - and isn't this an official Google project? It's very frustrating just trying to get up and running. Most API links all go to the same place and they all assume you're already a flex-box expert. It's like sending someone to read the W3C docs in order to learn HTML. Would love just a big long page with a tonne of examples that build on each other.

So there's a demo page... But what's the point of a demo page - which incidentally is just a completely seemingly random collection of layouts - if I can't get easy access to the source. Trying to view the DOM isn't especially helpful
https://tburleson-layouts-demos.firebaseapp.com/#/stackoverflow

Excuse my frustration but this project needs to seriously amp up its docs. It's especially bad compared to the main angular documentation which is fantastic.

[CaerusKaru]

@simeyla You are correct, documentation is a sore spot right now for the library, but we are making strides in improving it, especially with #520 and #540, each of which should see movement in the coming week. Please also note that Flex Layout is not as much of a priority as the main Angular repository, for obvious reasons, but that does not mean that we're not still actively working to improve it.

Speaking of the demo-app, the src lives in... src/demo-app! This is conveniently located both in the README underneath Explore Online as Source Code and under the Live Online link in the sidebar on the Wiki as Source Code.

Finally, PRs are always welcome to improve both the demo-app and any other part of the documentation (which will admittedly be easier after #520 lands). There are also tutorials available for Flex Layout, and even more for Flexbox. StackOverflow is also available as a resource for any issues you may come up with.

[simeyla]

I'm finding the following works quite well for most cases I've come across so far, especially with flex-wrap enabled. You don't use a fxLayoutGap, but just set css.

.container {
   margin: -5px;
}
.container > * {
   margin: 5px;
}

I know that negative margins can be dangerous but this is certainly simpler than some other ways.

Remember that for flex layouts margin's don't collapse. This is to give a 10 pixel gutter and to cancel it out on the container.

[nosliwsirhc]

Could we bind the gap to a media query in TS?

…

On Jan 20, 2018 4:47 AM, "simeyla" ***@***.***> wrote: I'm finding the following works quite well for most cases I've come across so far, especially with flex-wrap enabled. You don't use a fxLayoutGap, but just set css. .container { margin: -5px; } .container > * { margin: 5px; } I know that negative margins can be dangerous but this is certainly simpler than some other ways. Remember that for flex layouts margin's don't collapse. This is to give a 10 pixel gutter and to cancel it out on the container. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#134 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEb8x2IkESzI1KHeunNm9rYjN3oqfzxKks5tMbYrgaJpZM4LuKxV> .

[CaerusKaru]

I've submitted a preliminary PR for this, please see #667. If any of you have comments on that solution, we'd welcome them on that PR.

[nzbin]

I'm also think fxLayoutGutter is a good idea. It's perfect than fxLayoutGap.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}