display: grid

[macjohnny]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

It would be nice to have to possibility to choose between using display: flex and display: grid for building layouts.
The flex-layout library could be copied to allow using all features like the responsive API, etc.

This could either fit into flex-layout itself or be provided as a new package, e.g. grid-layout.

I could imagine directives to be used like this:

<div fxGridLayout="1fr 1fr 1fr 2fr">
  <div></div>
  <div></div> 
  <div></div>
  <div fxGridRow="span 2"></div>
  <div fxGridColumn="span 2"></div>
  <div></div>
</div>

See https://www.w3.org/TR/css-grid-1 and https://css-tricks.com/snippets/css/complete-guide-grid/
and https://www.youtube.com/watch?v=txZq7Laz7_4

This feature would allow to dynamically arrange the items in the grid areas, depending on the viewport size, without having to copy / move the actual items in the DOM tree.

[ThomasBurleson]

We have plans to add CSS Grid APIs to flex-layout... perhaps the combined library will be called @angular/ui-layout; but that is TBD.

[melroy89]

I really would like to see this indeed! Any updates so far?

[CaerusKaru]

The updates are that this is something we're looking into, but it's not a priority right now. It would need a lot of design work before we could get started. Any discussion about desired features would help and should be posted here.

[kylecordes]

@CaerusKaru Is there any interest in a "make Grid convenient in Angular" library, being separate from the "make Flex convenient in Angular" library? Having them together seems to add complexity in development, adoption, documentation, etc.; and doing them separately seems more modular.

[CaerusKaru]

@kylecordes The current idea is that they would be separate modules in the same package, as @ThomasBurleson alluded to above, something like
import {FlexModule, GridModule} from '@angular/layout';.

The reasoning is that these libraries will need to share the same common utilities like the MediaQuery engine and setting custom breakpoints. Testing is also going to be the same across both.

As for documentation, we're planning on switching to Dgeni at some point in the future, which will allow us to seamlessly create docs from the TS source itself.

[kylecordes]

@CaerusKaru Thank you, that is very useful, really looking forward to it. This is a common thing that developer coming to the Angular world ask for - "official" tools to do layout.

[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.}