Flexbox와 Grid 항목 사이 간격을 margin 없이 일정하게 만듭니다.
gap은 컨테이너 자식 사이에만 간격을 만들며 바깥 가장자리에는 공간을 추가하지 않습니다. row-gap과 column-gap을 따로 지정할 수 있고, 자식의 순서나 줄바꿈이 바뀌어도 일관된 간격을 유지합니다.
이번 예제의 출발점은 display:flex; gap:12px;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 행 간격과 열 간격을 서로 다른 값으로 바꾸세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
각 자식에 margin을 주면 첫 항목과 마지막 항목의 바깥 여백을 별도로 제거해야 할 수 있습니다.
직접 바꿔보세요행 간격과 열 간격을 서로 다른 값으로 바꾸세요.