Add CSS Grid support

[demetrio812]

CSS Grid is a very cool way of doing responsive layouts, I think it would be very helpful in a Nativescript app that supports multiple phone and tablet sizes.

In case you don't know it, here some link:

https://www.youtube.com/watch?v=7kVeCqQCxlk

https://gridbyexample.com

https://gridbyexample.com/examples/

Cheers,
Dem

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[NickIliev]

Hey, @demetrio812 thank you for your interest in NativeScript!

Based on these examples I think you can achieve most of them using the already provided Gridlayout or FlexBoxLayout in NativeScript.

[demetrio812]

Hello @NickIliev , yes you can, but the point of CSS Grid is to avoid putting the layout in the HTML/XML and move it to a responsive (and descriptive) CSS, the grid system can also avoid having a lot of extra code used Just as container, have a look at the video as he explains these points very well

Cheers,
Dem

[jeremychone]

I think there is a fundamental difference between the flexbox/vbox/hbox way of doing things and a "virtual grid system" that does not require to create UI Layout elements.

We have been using a lot CSS Flexbox, and while it works for almost anything, the code complexity tends to explode relatively quickly as it requires to have many UI Elements that only purpose is to express a constraints.

CSS Grid is a modern virtual grid layout system, which dramatically reduces the need of UI Layout Elements, and therefore make code cleaner, simpler, and more scalable. iOS auto layout kind of comes to the same benefits (constraints vs UI elements), the late iteration of Adoble Flex layout had similar characteristics, but CSS GRID is definitely as good as it gets IMO, and it would dramatically simplify layout code while allowing very precise and advanced layout.

In other words, Flexbox, is the Java Swing way of doing layout, and while it works, the virtual grid system of CSS Grid dramatically is really what we should have had for a long time (for web as well as Native).

[joshbruce]

Yes, please.

[AnthonyLenglet]

honestly, this would be amazing to have, both as a separation of concerns as well as a way of having additional properties like grid-gap to add gaps between items

[immocalcul]

I have long sought a solution to this problem in nativescript so here is a simple and free solution to manage in css the different size and format.

///////////////////////typescript code///////////////////////////////////////////////////
import { screen } from "tns-core-modules/platform";
ngOnInit(): void {
const deviceWidth: number = screen.mainScreen.widthDIPs;
if (deviceWidth >= 1280) {
this.ClassResponsive = "1280";
} else if (deviceWidth >= 1024) {
this.ClassResponsive = "1024";
} else if (deviceWidth >= 800) {
this.ClassResponsive = "800";
} else if (deviceWidth >= 600) {
this.ClassResponsive = "600";
} else if (deviceWidth >= 540) {
this.ClassResponsive = "540";
} else if (deviceWidth >= 480) {//toute est bon dans cette grandeur!!!!!!!!!!!!!!!
this.ClassResponsive ="480";
} else if (deviceWidth >= 400) {
this.ClassResponsive = "400";
} else if (deviceWidth >= 360) {
this.ClassResponsive = "360";
}
}

ClassResponsive: any = "";

[class]="ClassResponsive"

after in css:
.360 .element{
}
.400 .element{
}

........

[NathanaelA]

@flipimmobilier - You might be interested in the ns-platform-css it adds css groups for different sizes based on pre-configured (& configurable) groups. Basically allowing something like media query for all elements on a page.

Several of the items that NS-platform-css has done for the last couple years are now finally built it to NS 6.x; but some of them unfortunately still don't have a built in css method without using the platform-css plugin. So it still has its uses for a couple things like notch, specific devices, and the poor mans media query system... 😀

[immocalcul]

@flipimmobilier - You might be interested in the ns-platform-css it adds css groups for different sizes based on pre-configured (& configurable) groups. Basically allowing something like media query for all elements on a page.

Several of the items that NS-platform-css has done for the last couple years are now finally built it to NS 6.x; but some of them unfortunately still don't have a built in css method without using the platform-css plugin. So it still has its uses for a couple things like notch, specific devices, and the poor mans media query system... 😀

I saw your plugin I unfortunately did not have the chance to buy it because I tried to open a very complicated account I even made a donation believing that it was necessary to open the account. then I was asked to buy the plugins to use it with nativescript 6. decu of the process I decided to find a free solution. so I can't tell if your plugin works well unfortunately I don't sign up for a monthly subscription

[NathanaelA]

Sorry for the confusion on ProPlugins -- I would love to understand what wording made it confusing. So if you have a chance please send a email to team@proplugins.org and we will try and make sure the wordage is fixed. 😀

Unfortunately NativeScript plugins are not build and forget; they require maintenance -- hence a subscription. See http://fluentreports.com/blog/?p=974, https://fluentreports.com/blog/?p=970 and finally http://fluentreports.com/blog/?p=1116

But out of curiosity; I would love to chat with you more about what you would be willing to spend if it wasn't a subscription (ping me a the above address, so that we don't continue to pollute this issue anymore with more off topic chat)

[basickarl]

Any info on this? Would be a tremendous step forward is CSS Grids was to be supported in NativeScript.

<GridLayout
    columns="60, auto, *"
    rows="60, auto, *"
    width="230"
    height="230"
    backgroundColor="lightgray"
>
    <Label text="Label 1" row="0" col="0" backgroundColor="red" />
    <Label text="Label 2" row="0" col="1" colSpan="2" backgroundColor="green" />
    <Label text="Label 3" row="1" col="0" rowSpan="2" backgroundColor="blue" />
    <Label text="Label 4" row="1" col="1" backgroundColor="yellow" />
    <Label text="Label 5" row="1" col="2" backgroundColor="orange" />
    <Label text="Label 6" row="2" col="1" backgroundColor="pink" />
    <Label text="Label 7" row="2" col="2" backgroundColor="purple" />
</GridLayout>

Would translate to:

<GridLayout class="grid">
    <Label text="Label 1" class="label-1" />
    <Label text="Label 2" class="label-2" />
    <Label text="Label 3" class="label-3" />
    <Label text="Label 4" class="label-4" />
    <Label text="Label 5" class="label-5" />
    <Label text="Label 6" class="label-6" />
    <Label text="Label 7" class="label-7" />
</GridLayout>

And:

.grid {
  display: grid;
  grid-template-rows: 60px min-content auto;
  grid-template-columns: 60px min-content auto;
  width: 230px;
  height: 230px;
  background-color: lightgray;
}

.label-1 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
  background-color: red;
}

.label-2 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 4;
  background-color: green;
}

.label-3 {
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 2;
  background-color: blue;
}

.label-4 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: yellow;
}

.label-5 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 3;
  grid-column-end: 4;
  background-color: orange;
}

.label-6 {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: pink;
}

.label-7 {
  grid-row-start: 3;
  grid-tiveScript coderow-end: 4;
  grid-column-start: 3;
  grid-column-end: 4;
  background-color: purple;
}

(or if you like just just colspan and rowspan).

.grid {
  display: grid;
  grid-template-rows: 60px min-content auto;
  grid-template-columns: 60px min-content auto;
  width: 230px;
  height: 230px;
  background-color: lightgray;
}

.label-1 {
  background-color: red;
}

.label-2 {
  background-color: green;
}

.label-3 {
  background-color: blue;
}

.label-4 {
  background-color: yellow;
}

.label-5 {
  background-color: orange;
}

.label-6 {
  background-color: pink;
}

.label-7 {
  background-color: purple;
}

In any case, this should be programatically possible (basically a transpiler), question is, where would this code have to sit in NativeScript?

[andrewm-mitchells]

Would be great to have support for grid-gap on GridLayout or gap on FlexboxLayout similarly to the web version of CSS so we can have a way to evenly space items. For example is you want to build a layout of 4 buttons (2 on each row) with css you can do something like this:

.foo {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	.bar {
		width: calc(50 - 10px);
		height: 200px;
	}
}

or:

.foo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 10px;
	.bar {
		height: 200px;
	}
}

Both will result in the following layout with 4 .bar elements nested in parent .foo in HTML:

It's extremely hard to achieve similar layout without specifying row/col on every child (.bar) element in NativeScript. And this was probably requested a million times already but calc is another powerful css prop we need in NativeScript.