flex (플렉스) & gird (그리드)

레이아웃을 한 방향으로 정렬하는 flex, 두 방향으로 정렬하는 grid

display: flex

flex는 수평 혹은 수직 영역의 레이아웃을 정렬할때 많이 사용한다.
쉽게 말해, 레이아웃을 한 방향으로 구성하기 용이하다.

그렇다면 flex를 선언 후, 어떠한 옵션값이 이미지로 알아보겠다.

display: grid

grid는 수평과 수직 영역의 레이아웃을 정렬할때 많이 사용한다.
쉽게 말해, flex와 달리 레이아웃을 두 방향으로 구성하기 용이하다.

그렇다면 flex를 선언 후, 어떻게 활용하는지 알아보겠다.

1. grid-template-rows와 grid-template-columns
   grid-template-rows는 가로방향을 grid-template-columns은 세로방향을 나누는 속성이다.
   나눌때는 구체적인 수치를 적을 px단위와 나눌범위를 비율로 표현한 fr단위가 있다.

  .container {
      grid-template-rows: 1fr 100px 1fr;
  }

위에 코드는 100px를 제외하고 나머지부분을 1:1로 나누어 갖는것을 의미한다.

2. grid-template-areas
   나눈 그리드영역에 아이템들을 할당시켜주는 속성이다.

  .container {
      grid-template-areas: 
      "header header header"
      "main main main"
      "footer footer footer";
  }

내가 명명한 클래스이름으로 영역을 배치하여 나눠 줄 수있다.

더 많은 속성들과 개념이있지만 우리는 간단하게 여기까지만 알아보겠다.