Grid-Gap Issue

I had an issue with the grid-gap CSS property when I redesigned this blog last year using CSS Grid. The gaps don’t work as I had expected. Take a look at the demo on CodePen.

Four equal columns:
grid-template-columns: 1fr 1fr 1fr 1fr;

Three columns where the middle column is doubled:
grid-template-columns: 1fr 2fr 1fr;

In a grid layout, I expect the columns and the gutters to line up correctly. The middle column (B&C) on the second example should match up with column B and column C in the first example, but they don’t. They are a bit off. I don’t think this is bug. Browsers just interpret grid-gap as gap in between the columns; therefore, they don’t know that column B&C, which has 2fr, should include a gap just like column B and column C in the first example. Am I missing something? If you understand the issue, please let me know.

Update: Ngô Thiên Bảo tweeted the solution. This is all I need:

grid-column: span 2;

I can’t believe I did not know that. Now I know.