그리드 레이아웃

그리드 레이아웃이란

 

웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것

• 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있다.
• 그리드 레이아웃의 특성
  - 시각적으로 안정된 디자인을 만들 수 있다.
  - 업데이트가 편한 웹 디자인을 구성할 수 있다.
  - 요소를 자유롭게 배치할 수 있다.

 

그리드 레이아웃을 만드는 방법

 

• 플렉서블 박스 레이아웃 (flexible box layout)
  - 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것
  - 여유 공간이 생길 경우 너비나 높이를 적절하게 늘이거나 줄일 수 있다.
  - 수평 방향이나 수직 방향 중에서 한쪽으로 주축으로 정하고 박스를 배치한다.
  - ex) 주축을 수평으로 정하면 박스를 왼쪽에서부터 오른쪽으로 순서대로 배치하는데, 화면 너비를 넘아가면 수직으로 이동해서 다시 순서대로 배치한다.
• CSS 그리드 레이아웃
  - 수평과 수직 어느 방향이든 배치할 수 있다.
  - 마치 레고 블록을 끼워 맞추듯 요소를 배치한다.