grid는 또 뭐죠?

Grid

• .container {
    display: grid;
  }
  

• flex 와 grid 는 Css 에서 Layout을 담당하는 속성이다. 이번에는 grid에 대해 가볍게 살펴보려고 한다.
• flex 와 마찬가지로 grid 또한 container가 반드시 필요하다.
• 하나의 페이지 또는 컴포넌트를 적당히 가로 또는 세로줄로 구분짓고 그안에 컴포넌트를 채운다
• 얼핏 보기엔 결과물이 테이블과 비슷하게 보이지만, 가로 또는 세로로 화면을 구성한다는 점의 공통점은 있지만 테이블의 경우 데이터를 일목요연하게 전달하는 것을 목적으로 하고 있어 셀을 유연하게 다루기가 어렵다.
• 반면 grid의 경우 child 끼리 겹치는 경우도 생길 수 있는 등 시작적인 자유도가 훨씬 높다.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

Grid Lines

• 
• 위 그림처럼 6개의 영역으로 나눴을 경우 세로 줄은 4개 가로줄은 3개로 영역을 구분하고 있으며 각각의 구분선에 대해 이름을 정하고 Layout을 잡아줄 수 있다.
• grid line으로 Layout 설정

Grid and flexbox

• grid는 flexbox와 달리 처음부터 2차원으로 레이아웃을 잡는다. flexbox는 2차원 적으로 다루기도 하지만 출발은 1차원에 대한 레이아웃이다.
• flexbox는 축이 flex-direction 에 따라 바뀌기 때문에 같은 속성이 다른 효과를 가져오는 것 처럼 보이기도 한다. 하지만 grid는 그럴일이 없다.
• 어느 한쪽이 좋다고 말하기는 어려울 것 같다. 작고 간단한 컴포넌트에 쓰기엔 플렉스 박스가 유리할 것 같다.
• 화면의 전체적인 구성을 다룰 때 혹은 갤러리 종류를 다루는 경우 그리드가 유리할 것 같다.

참고자료

• Basic Concepts of grid layout
• CSS Grid Layout
• Grid Lines