CSS gap 속성 사용하기

사진과 같은 배치를 위해서 3개의 컴포넌트를 배치하고 flex-wrap과 justify-between (tailwindCss를 사용하여 작성중이었습니다) 주었다가 2개만 놓았을 땐

이렇게 배치되는 걸 보곤 헉쓰바레 이 방법이 아니구나! 하고 새로운 방법을 찾으러다녔습니다..

// 실제로 작성했던 css 코드
(...)
export const MypageItemWrapper = styled.div`
  ${tw` flex flex-row flex-wrap justify-between `}
`;
(...)

그래서 찾아낸 방법은 gap 속성 설정하기! 였습니다.

Gap 속성은??

gap 속성은 자녀 요소들이 일정한 간격으로 떨어져있을 수 있도록 설정할 때 사용합니다.

👤: 그럼 마진(margin)은 사용하면 안되나요?

물론 마진을 사용해서 떨어뜨릴 수도 있지만, 인접한 요소들이 있을 때 요소들 사이에 갭 측 공간을 만들어주는 역할을 하기 때문에 인접한 요소가 아니라면 갭을 만들지 않는다는 특징이 있습니다.
반면에 마진은 설정하면 설정하는 대로 다 띄워버립니다! (떨어져!)

Gap 사용법

gap은 마진 작성법과 비슷하지만 약간은 다릅니다.
gap은 상하좌우의 모든 갭을 동시에 설정하거나, 상하-좌우의 갭을 설정할 수 있습니다.

div {
  gap: 20%; //(상하좌우 설정)
}

div {
  gap: 20% 2px; //(상하-좌우 설정)
}

이렇게 말이죠!

그래서 gap 속성을 적용하여 저의 css 문제를 해결할 수 있었는데요.

export const MypageItemWrapper = styled.div`
  ${tw` flex flex-row flex-wrap `}
  gap: 0 40px; 
  //여기서 갭은 제가 만든 컴포넌트의 width 값에 따라 우측 여백이 안 남도록 설정했습니다.
`;

🔍 결과물!

휴~ 오늘도 css 속성을 새롭게 배워갈 수 있었습니다!