New grid system based on flex

[Tuizi]

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior

The current grid system is based on the float layout.

Expected behavior

Add a new grid system based on the flex layout (because we are in 2017)

What is the motivation / use case for changing the behavior?

No need to present the popular display property: flex. PrimeNG is the only new framework that still use the old layout system: float. It could be great to have a grid system based on display: flex and even better in the future, based on display: grid

[ova2]

+1

I hate outdated float based layout too. For now, we can use Flexbox in Bootstrap 4. There is one section in the upcoming book which describes Flexbox intergration in PrimeNG. Project is here: https://github.com/ova2/angular-development-with-primeng/tree/master/chapter2/graphic-editor-bootstrap4

[Tuizi]

@ova2 On our side we will switch from PrimeNG grid system to Angular official Flex Layout system https://github.com/angular/flex-layout/wiki/Responsive-API

[ova2]

I don't like Angular directives and prefer pure CSS solution for Flexbox layout (pure CSS works faster). Names are also shorter. My choice is Bootstrap 4 Layout system. It's very powerful. Am 04.07.2017 22:53 schrieb "Fabien Rogeret" <notifications@github.com>:

…

@ova2 <https://github.com/ova2> On our side we will switch from PrimeNG grid system to Angular official Flex Layout system https://github.com/angular/flex-layout/wiki/Responsive-API — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3298 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAu1ZhrD7puvKXsEt8OmAM758Ngjkhl0ks5sKqZKgaJpZM4ONmdS> .

[d668]

@Tuizi angular/flex-layout is still in beta and full of bugs

[Tuizi]

@intergleam We use it here for 4 months and no blocking bugs. Angular will start to be more active with FlexLayout, I know its a beta but everything we were expecting work perfectly with this version right now

[d668]

I have @angular/common 2.4.8, tried to install @angular/flex-layout 2.0.0-beta.8, and I have a bunch of errors...

WARNING in ./~/@angular/flex-layout/media-query/breakpoints/break-points-token.js 13:29 export 'InjectionToken' was not found in '@angular/core'

and much more

[Tuizi]

You should consider updating your Angular version, they don't support 2.4.x. It's in bold at the beginning of the README

[AlejandroFlorin]

+1 for this feature. It would be nice if we could use the other flexbox alignment options with the grid system (horizontal and vertical alignment, etc.)

[kolkov]

We need Native CSS Grid support too.

[cagataycivici]

FlexGrid coming soon for 6.1.4.

[cagataycivici]

Implemented for 6.1.4.

[cagataycivici]

https://www.primefaces.org/primeng/#/flexgrid

[SarvagyaS]

I have bought Ultima theme. But, there are no styles for flexgrid classes in theme's CSS file. I am using flexgrid.css but that makes the page very unattractive.
Below I have posted the same form one with using ui-g classes and other with using flexgrid classes, one with flexgrid looks bad there is no padding in rows.

using flexgrid.

using ui-g

[scblur869]

how long before the current Grid CSS is removed and FlexGrid is fully documented and all examples updated on the site with FlexGrid?

[cicciogeppo88]

Hello,
will it be possible to update the ultima primeng templates in order to use the flexgrid system? they are currently outdated and misleading,

Thanks,