blinkFeatures: CSSGridLayout not working

[samgranger]

• Electron version: v0.36.8
• Operating system: OS X Yosemite 10.10.5

new BrowserWindow({width: 1200, height: 800, experimentalFeatures: true, blinkFeatures: 'CSSGridLayout'});

Grid is not working as expected, HTML:

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

CSS:

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 10px 100px 10px 100px;
  grid-template-rows: auto 10px auto;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}

.b {
  grid-column: 5 / 6;
  grid-row: 1 / 4;
}

.c {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.d {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

This should be displayed as following:

Unfortunately, the div's just fall under each other.

[zcbenz]

Does it work in Chrome browser?

[samgranger]

It works in Chrome browser after enabling "Enable experimental Web Platform features." in chrome://flags

[zcbenz]

experimentalFeatures should be put in webPreferences:

new BrowserWindow({
  webPreferences: {
    experimentalFeatures: true,
  }
});

[thompsonemerson]

@zcbenz Yes, chrome support already exists!

[jnthnjns]

@zcbenz This still doesn't work for me.

There appears to be full support in chrome:

Demo

I tried turning on experimentalFeatures as you mentioned and it starts to recognize display: grid but no grid- property is recognized.

new BrowserWindow({
    width: 1250,
    height: 750,
    center: false,
    webPreferences: { experimentalFeatures: true }
});

This is a much desired feature for our suite of electron applications. Is it a limitation of where chromium is at in the electron environment?

[enlight]

@jnthnjns Which version of Electron are you on? CSS Grid should be on by default as of Electron 1.6 (which is based on Chromium 57), no need to enabled experimental features.

[Septh]

@enlight Doesn't work for me neither without the experimentalFeatures turned on. Using Electron 1.6.11.

[enlight]

@Septh Yeah, sorry I got the Chromium/Electron versions mixed up, Electron 1.7.X is the one that's based on Chromium 57. The example in the OP works for me in 1.7.4.

Edit: Grrr, no, Electron 1.7.X is based on Chromium 58... I forgot Chromium 57 got skipped.

[jnthnjns]

@enlight I was running electron@latest (at the time of writing this 1.6.11). I did pull down 1.7.5 and grid is now working for me.

Any timeline on taking 1.7.x out of beta? I may have to do some convincing to use an "unstable" version, doing what I do. I work for a local government and we use Electron for some of our client applications for our 911 Dispatchers.

Thanks for your help.

[mathe42]

It does not work for me with electron v. 1.7.5 :(

[highri5e]

yep no joy in 1.7.5

[enlight]

@mathe42 @highri5e You must be running an old Electron version, open DevTools and run process.versions.electron to check the Electron version.

[highri5e]

@enlight Thank you for a quick response. I'm on 1.7.5 but what i just found out is that the issue was with the '@supports' feature statements that were not recognized and thus preventing the css to be applied.

[mathe42]

It works.... Thanks.

[limeandcoconut]

Can't get this to work in 1.7.9 with or without the flag. Properties don't error but they don't work either.