간단하게 카드 리스트 간격 주기 (feat. 오늘의집)

프로젝트를 진행할 때 카드 사이에 간격을 주는 것은 대부분의 프로젝트에서 빠지지 않는 UI입니다.

그리고 그런 카드 리스트의 간격이 카드의 위치마다 달라지기 때문에 다양한 CSS를 이용하여 구현합니다.

// exam 1

& li + li {
  margin-left: 20px;
}

// exam 2

& li {
  margin-right: 20px;
  
  &:nth-child(3n) {
    margin-right: 0px;
  }
}

// exam 3

& li:not(:last-child) {
  margin-right: 20px;
}

exam 1처럼 앞에 li가 있을 경우에만 margin을 20px 주는 방식도 있고,

exam 2처럼 특정 배수의 카드마다 margin을 재할당 해 주는 방식,

exam 3처럼 줄 단위로 설정한 뒤 마지막 카드를 제외하고 margin을 할당해 주는 방식 등이 있습니다.

 

가장 간편하면서도 직관적으로 간격을 주는 방법을 소개하겠습니다.

// card section

const CardWrapper = styled.ul`
  ...
  margin: 0 -10px;
`;

// card

const Card = styled.li`
  ...
  margin: 0 10px;
`;

카드 전체를 감싸는 section을 만들고 그곳에 여백이 들어간 값을 음수로 설정합니다.

 

그리고 실제 card에는 내가 설정할 여백을 설정해 줍니다.(ex. 카드 사이 간격 20px이라면 10px씩)

그럼 간단하게 카드의 여백을 설정할 수 있습니다.