Wrap

요소 사이에 간격을 추가하고, 공간이 부족하면 자동으로 줄바꿈해 주는 레이아웃 컴포넌트예요. 여러 요소를 한 줄에 유연하게 배치하고 싶을 때 사용합니다.

출처: 문서

본문

기본적으로 Wrap은 자식 요소들에게 display: flex, flex-wrap: wrap, 그리고 gap: 8px을 적용해요.

import { Wrap, WrapItem } from "@chakra-ui/react"

<Wrap>
  <div />
  <div />
</Wrap>

gap prop을 전달하면 줄바꿈이 발생하더라도 각 자식 사이에 일정한 간격을 적용할 수 있어요.

align prop을 전달하면 교차 축(cross axis)에서 자식 요소의 정렬을 변경할 수 있어요.

justify prop을 전달하면 주 축(main axis)에서 자식 요소의 정렬을 변경할 수 있어요.

rowGap과 columnGap prop을 전달하면 행과 열 사이에 일정한 간격을 적용할 수 있어요.

gap, rowGap, columnGap prop에 반응형 값을 사용하면 각 자식 요소 사이에 화면 크기에 따라 달라지는 간격을 적용할 수 있어요.