Flex와 Grid를 레이아웃에 맞게 사용하기

오늘은 자주 사용하는 CSS 속성에서 Flex와 Grid를 좀 알려드릴까 해요

아마 영상이나 책을 보고 코딩을 따라 해오시는 분들은

왜 사용하나요?라는 질문에 답변이 가능하신가요???

 

네.. 저는 저 질문에 어느 상황에 쓴다는 이해를 했지만

늘 그냥.. or 당연히.. 꼭 저렇게 시작을 하더라고요..

 

저는 저렇게 말을 시작한다면 제가 정확히 모르지만 아는 척

넘기기 위해 사용한다는 걸 알기에 오늘 주제를 가져왔어요

 

Flex와 Grid의 차이점

flex는 1차원적인 부분만 고려한 레이아웃

grid는 2차원적인 부분도 고려한 레이아웃

간단히는 이렇게 말할 수 있을 것 같아요

 

언제 사용하면 좋냐라고 묻는다면 저는

flex는 카테고리나 목록 같은 한 방향으로 가는 것에 적합

grid는 상세 내용처럼 공간에 나누는 것에 적합

이렇게 말할 수 있을 것 같아요

 

하나의 행 또는 열을 만들 것인가

행과 열을 만들 것인가에 따라 바뀌겠죠

 

코드에 적용한 걸 보여드릴게요

.container {
  display: flex;
  justify-content: space-between;
}

 

Flex 코드 예시

 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

 

Grid 코드 예시

 

 

따라서,

이미 결정된 레이아웃을 만들고 싶다면 Grid 속성을 사용

자유로운 레이아웃을 만들고 싶다면 Flex 속성을 사용

 

더욱 자세하게 그림으로 알려주시는 분이 있어 공유해 볼게요

출처 - https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자