grid-column-gap은 행의 마지막 div 끝에 갭을 추가합니다.

Question

저는 CSS에서 그리드를 실험 해왔고 다음과 같은 것을 보았습니다.
제가

내 .container 여러 div의 20 %의 폭을 갖는 5 개 항목의 격자를 생성 함유하는 용기를 만들었다.

grid-column-gap을 추가했으며 컨테이너에 오버플로가 생성되었음을 알았습니다. 나는 grid-column-gap이 값을 grid-template-columns 값에 더하는 것을 발견했다. 그래서 값을 19 %로 변경했습니다.

이제 항목이 눈금에 맞습니다. 그러나 내 이해는 grid-column-gap은 div 사이에 추가됩니다. 제가 지금하고있는 것은 마지막 항목에도 오른쪽에 간격이 있다는 것입니다.

div 사이의 틈을 갖고 싶습니다. 제발, Fiddle

누구든지 내가 뭘 잘못 설명 할 수 있을까요?

Answer 1

grid의 백분율 단위는 다른 값으로 계산됩니다. 단위가 백분율이면 계산 된 전체 영역에 추가 공간이 추가됩니다.

그러나 fr 단위를 추가하면 flexbox와 유사하게 작동하며 추가 공간을 추가하지 않습니다.