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.