display flex와 grid 사용하기

처음에 작성한 코드

처음에 Grid를 사용하지 않고 flex만 사용하여 배치하려고 했다.
(AreaCard 카드는 너무 긴 관계로 따로 추가 하지 않았다. AreaCard는 여러개의 객체가 담아 있는 배열이다.)

 <Nav></Nav>
      <CenterAligned>
        <H1>어디로 여행을 떠나시나요?</H1>
        <AreaCardBox>
          {AreaCard.map((item) => (
            <PictureBox 
              imageURL={item.img}
              onClick={()=>{}}
              text={item.EnglishName}
              koText={item.KoreanName}
            />
          ))}
        </AreaCardBox>
      </CenterAligned>


const CenterAligned = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`

const H1 = styled.h1`
  font-size: 28px;
  text-align: center;
  margin-top: 85px;
  margin-bottom: 65px;
`

const AreaCardBox = styled.div`
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
`

const Nav = styled.nav`
  height: 72px;
`

구현하고자 한 것

한 줄에 4개의 PictureBox 박스를 배치하고 마지막줄에는 한 개만 남아 왼쪽으로 정렬시킨다. 그리고 PictureBox 전체 즉 AreaCardBox는 화면 가로로 가운데 정렬시키고자 다음 같이 작성했다.

• CenterAligned의 align-items: center가 적용되지 않는 문제 발생
  자식 tag AreaCardBox가 justify-content: flex-start 속성을 가져서 인지 가운데 정렬은 안되고 왼쪽 정렬이 된다...
• 가운데 정렬하기 위한 시도
  margin: 0 auto;
  실패
  position은 시도 안 해봄..ㅎㅎ
  마지막으로 grid ⬇️

Grid 사용하기

const AreaCardBox = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 340px);
`

한 줄에 340px 크기로 4개 할당되도록 고정시켰다.
이렇게 하면 앞에서 차례대로 배열의 요소가 배치되어 justify-content: flex-start와 같이 배치된다.
AreaCardBox에서 grid를 사용하여 CenterAligned에도 영향을 주지 않아 CenterAligned에서 align-items: center가 잘 적용이 되었다.

Flex와 Grid에 대한 나의 생각 정리

grid를 사용하면 내가 원하는 위치, 갯수를 구체적으로 지정할 수 있다는 장점이 있다. 다만 속성에 비해 조금 복잡하다는 단점이 있다.
그에 비해 flex는 grid에 비해 쉽게 사용할 수 있다. 다만 부모와 자식 관계를 생각하며 tag를 작성하고 사용해야 한다.

이때까지 grid가 어렵게 느껴져 왠만하면 flex로 해결하려고 했다. 하지만 이와 같은 문제를 겪으며 다양한 방법을 파악하고 적용시킬 수 있어야 겠다라고 생각했다.
Grid도 조금써서인지 생각보다 어렵지 않았다.
다음에는 Grid에 대해 정리해봐야겠다.

참고자료
이번에야말로 CSS Grid를 익혀보자
CSS로 무엇이든 중앙 정렬하는 방법 - Div, 텍스트 등