I can reproduce the issue in your codepen.
But I've tried to reproduce the issue in an isolated example without success:
http://jsbin.com/fisuto/edit?html,css,output

The problem I see is that when I edit the CSS to change the grid-template,
the grid container doesn't have that property.
I've been using the DevTools to inspect the grid container,
initially it has:
  .grid-area {
      display: grid;
      grid-template: "😄 😄 😄 😄" 50px "↕️ 🖼 🖼 🖼" 400px "↕️ 🍅 🍅 🍅" auto "👟 👟 👟 👟" 80px / 10% 30% 30% 30%;
  }
But after the modifications it has:
  .grid-area {
      display: grid;
  }
So if the "grid-template" property is not applied,
it's somehow expected that it doesn't work.
Now the question would be to know why that property is not applied
after the modification.

Could you provide a reduced test case? Thanks!

Able to reproduce the issue on Windows 10, Ubuntu 14.04 and Mac 10.12.6 using chrome stable version #61.0.3163.91 and latest canary #63.0.3215.0.

Bisect Information:
=====================
Good build: 57.0.2928.0	 Revision(433845)
Bad Build : 57.0.2929.0	 Revision(434071)

Change Log URL: 
https://chromium.googlesource.com/chromium/src/+log/c11607a50691c6da823467bb389d14f659433c77..79bd413143afe5ad68104a3c99b9c04f64fc25ac

From the above change log suspecting below change
Review URL: https://codereview.chromium.org/2521953002

rego@ - Could you please check whether this is caused with respect to your change, if not please help us in assigning it to the right owner.

Thanks...!!

Sorry @krajshree but thid doesn't look like a regression.
If it was working before r434071, it was just because CSS Grid Layout was not shipped.
I guess you were not testing it with the --enable-experimental-web-platform-features flag
on the previous revisions.

Anyway I can keep the ownership until we clarify what's the problem in the codepen.

It seems like it's not an issue in this reduced test case:
https://codepen.io/una/pen/VMLVeJ .. interesting

It appears that pasting in the emoji was introducing whitespace (with a
ctrl+shift+v instead of ctrl+v there isn't an issue).

As a related aside, this is also true in editing style blocks anywhere in
Chrome vs. FireFox (in Chrome whitespace is added when you're not careful
to use shift+enter to make new lines, while FF ignores this whitespace, and
its safe to just use enter to make new lines)

Ok, I see it now, the problem is not the whitespaces, but that when you paste with "Ctrl+V" it adds a new <span> element like:
  <span style="font-size: 17.6px;">↕️</span>

Adding "font-size: 1.1em;" to the reduced test case causes the same problem.
And it happens even without emojis. And in a regular block too.

Attaching a new reduced example to reproduce the issue.
The result in this case is different comparing Chromium and Firefox:
* Chromium:
  <div contenteditable="">
  test<span style="font-size: 17.6px;">test</span>
  </div>
* Firefox:
  <div contenteditable="">
  testtest
  </div>

Deleted: bug-copy-paste.html 521 bytes

bug-copy-paste.html 521 bytes View Download

Returning to blink queue for triage (right now it's a Pri=1 regression with no owner).

We need to revise handling font size on clipboard.