Grid

Flex vs Grid

2. Flexbox(Flexible Box Layout)

• 1차원 레이아웃 : flexbox는 한 방향(가로 또는 세로)으로만 아이템을 배치하는 데 최적화된 레이아웃 시스템이다. 주로 하나의 축(수평 또는 수직)에서의 정렬과 배치에 적합하다.
• 아이템 정렬 : Flexbox는 개별 아이템 간의 공간 분배와 정렬에 유연한 옵션을 제공한다. 예를 들어 아이템을 중앙 정렬하거나 균등하게 간격을 두는 것이 매우 쉽다.
• 순서 변경 : Flexbox는 DOM 순서와는 별개로 레이아웃에서 아이템의 순서를 쉽게 변경할 수 있는 기능을 제공한다.
• 사용 사례 : Flexbox는 작은 UI 요소의 레이아웃(예: 버튼 그룹, 네비게이션 바, 카드 목록)이나 한 방향으로 배치해야 하는 간단한 레이앗에 적합하다.

3. Grid(CSS Grid Layout)

• 2차원 레이아웃 : Grid는 2차원 레이아웃 시스템으로, 행(row)과 열(column) 두 방향으로 아이템을 배치할 수 있다. 따라서 전체 페이지 레이아웃과 같은 복잡한 레이아웃을 구성하는 데 적합하다.
• 영역 배치 : Grid는 아이템을 특정 행과 열에 배치하는 방법을 제공한다. 예를 들어, 페이지의 헤더, 사이드바, 메인 콘텐츠 영역을 정확하게 정의하고 배치 할 수 있다.
• 공간 분배 : Grid는 행과 열의 크기를 쉽게 조정할 수 있으며, 영역을 겹치거나 특정 영역에 대한 빈 공간을 정의하는 등의 유연한 레이아웃 구성이 가능하다.
• 사용 사례 : Grid는 복잡한 페이지 레이아웃, 대시보드, 갤러리와 같은 다양한 구성 요소가 있는 레이아웃에 적합하다. 

4. Grid 설명

그리드 컨테이너(부모 요소) 레벨에서 대부분의 레이아웃을 구축할 수 잇다.

그리드는 격자 (템플릿)을 만드는데 이를 부모 요소안에서 지정이 가능하다.

 

최초에는 템플릿이 지정되지 않아 1개의 column과 row로 지정이 되어있다.

여기서 초기값 none이라면 gird-auto-row 또는 column : auto가 작동이 된다.

초기 너비(지정 없음) grid-auto-column:auto(height)를 기준이다, row의 경우는 row로 기준(height)

 

지정이 되었을 때, 해당요소의 크기가 어떻게 설정이 되었는지 확인할 필요가 있다.

 

여기서 만약 auto안에 내부컨텐츠가 늘어난다면, 아래와 같이 나온다. 이는 flex-grow, basis 와 비슷핟.

 

grid-template-columns: 1fr 1fr 1fr

• 1fr → fractional unit 그리드 컨테이너 너비 기준에서 내부 콘텐츠 관계없이 비율로 책정(1fr은 컨테이너 안에서 똑같은 비율로 나눠지게 된다.) 1fr 1fr 1fr라면 3개의 div를 컨테이너 안에서 똑같은 비율로 나뉜다.

 

grid-template-rows: none; → 초기값: none가 된다면 grid-auto-rows: auto;가 작동

→ 지정이 된게 없으면 grid-auto-rows: auto; 를 기준한다.(height)

 

최초의 높이와 너비는 아래로 기준을 둔다.

내부 컨텐츠에 따라 높이와 너비를 결정함 grid-auto-columns: auto; → 내부 콘텐츠 너비, 초기값: auto

→ 여기서 auto를 지정하게 되면 flex-grow랑 비슷하다.

grid-auto-rows: auto; → 내부 콘텐츠 높이, 초기값: auto

 

 

5. 정렬

grid-auto-columns: auto; 와 grid-auto-rows: auto; 라면 아래와 같이 작동하게 된다.

가용공간으로 인하여 아래 초기값이라면 아래와 같이 작동

justify-items: stretch; 초기값 - 가로축

align-items: stretch; 초기값 - 세로축