[Web/CSS] CSS - 그리드 레이아웃

✏️ 그리드 레이아웃(Grid Layout)

반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 함, 재배치하려면 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃을 사용하게 됨. 그리드 레이아웃은 웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말하며 화면을 규칙적으로 배열하므로 레이아웃을 일정하게 유지

 

✏️ 그리드 레이아웃의 특성

1. 시각적으로 안정된 디자인을 만들 수 있음
2. 업데이트가 편한 웹 디자인을 구성 가능
3. 요소를 자유롭게 배치할 수 있음

✏️ 플렉서블 박스 레이아웃(flexible box layout)

그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것. 
여유 공간이 생길 경우 너비와 높이를 적절하게 늘이거나 줄일 수 있고 플렉스 박스 레이아웃이라고 부름

수평 방향이나 수직 방향 중에서 한 쪽을 주축으로 정하고 박스를 배치

 

✏️ CSS 그리드 레이아웃

플렉스 박스를 사용할 때는 주축이라는 개념이 있어서 수평이나 수직 중 하나를 기준으로 해서 요소를 배치하게 됨 그러나 CSS 그리드 레이아웃은 수평과 수직  어느 방향이든 배치할 수 있으며 레고 블록을 끼워 맞추듯이 요소를 배치한다고 생각하기