flexgrid | Flexbox CSS Layout System | User Interface library

I want to use PrimeNG's FlexGrid and tried to simply copy the example:

I need to format a 10 digit string to this format: '(123) 456-7890'. However, I need this to happen as the user types. So if the user has inputted only 3 digits, the input should display: '(123)'. If they've inputted 5 digits the input should display: '(123) 45'

With my current code, the formatting only takes place after the 10th character is entered. I'd like it so that it formats it from the third character onwards.

Displaying an image gallery of different sized images and ratio with the following specs:

1. No blanks (margins) between images.
2. Respecting the original ratio as much as possible.
3. Images surrounded by a link.
4. Non-JS solution.
5. Images could be cropped a bit.
6. Portable solution.
7. Set of images displayed is random.
8. Images must be displayed from left to right (prevents using columns).

I achieved that with the following flexbox solution:

I have a Flexgrid (vb6 not .Net) disconnected from any Db, having some rows like this:

I have a flexgrid being populated by a datatable. I am then grouping by a specified column and adding nodes to use the treeview property. The issue is, for example, if I have 1000 records and it splits it up into 20 groups, I will have 20 records at the end that are just added into the last node because it stops looking after 1000 rows, INCLUDING the nodes that it created, meaning that it would think there are 1020 rows in the grid. Here is the function I am using to create the nodes:

I'am using the Primeflex Flexgrid according to the documentation, but it wraps to a new line after 11 rows, when instead it should only wrap if 12 rows are used. Does someone have a fix for that? Version in package.json: "primeflex": "^1.0.0-rc.1",

I have included the "node_modules/primeflex/primeflex.css" in my angular.json, otherwise it wouldn't wrap anything at all, so this is not the issue. I suspect the problem is somewhere in the Library, but I am too newbie to find the solution (yet) and simply override it with a SCSS Class myself. I also found an existing issue on Primflexes Github, but the solution that another user reported there is not explained well enough for me to understand it.

See my Stackblitz demo of the problem.

I expect it to work like this (sorry for the picture link, but apparently I'm not smart enough to properly include an image).

Also, if someone with more Rep could add the Tag "Primflex" it would be great.

I can think of several ways to work around this, but my question is if I'm missing a way to do this natively.

I have a footer on my page. I want to display some text which is right aligned in the footer. But I also want the text center aligned vertically.

The immediate thought is to add some padding to the element, but if I decide to make the footer resizeable later that will break the design. There are some other CSS approaches that don't use native Flexgrid options.

The other idea is to put a div within a div (for example, any element) and then center the first align-content: center the first one and align-content: flex-end the interior one. Which works but is a little messy.

What I'm wondering however is if I can natively tell Flexgrid to align the content both to the right horizontally and centered vertically?

EDIT

I've accepted the answer given by @user943702 below. I needed to modify it slightly to work with my Vue implementation as shown in the snippet below.

I use Flex Grid in my Angular7 project but although the behavior is normal in the first situation, and I can locate two p-col-6 side by side, I cannot make them side by side after moving them in p-col-12. Here is the problem:

#status 1: