I don’t understand why when I set up background-color to my section (and set grid-gaps), gaps are in the same color as cells. Gaps should be blank.
The gaps are “blank” in that there’s nothing there. I get why you think there should be some visual difference but what you’re saying doesn’t make any sense: If I have a sheet of paper + some squares of transparent film, and I spread those bits of film out in a grid with gaps in-between them, the sheet of paper doesn’t magically change colour where the gaps are. You have set a background colour on the parent element, if you want the children to have a different background colour you need to set that.
In your example you’re setting background color to the
<section> element, not the individual grid elements.