19. 그리드 레이아웃 개관

그리드 레이아웃

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

 

그리드 레이아웃의 특징

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

만드는 방법

- 기존에 알고 있던 가변 그리드를 CSS의 float 속성으로 사용할 수도 있고,

  플렉서블 박스 레이아웃이나 CSS 그리드 레이아웃으로 적용할 수도 있음.

 

 

플렉서블 박스 레이아웃

•  그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것
• 이때 여유 공간이 생길 경우 너비나 높이를 적절하게 늘이거나 줄일 수 있음
• 플렉스 박스는 수평 방향이나 수직 방향 중에서 한쪽을 주축으로 정하고 박스를 배치

 

아래 그림은 주축을 수평으로 정하면 박스를 왼쪽에서부터 오른쪽으로 순서 대로 배치 하는데，화면 너비를 넘어가면 수직으로 이동해서 다시 순서대로 배치하는 모습을 보이고 있다.

 

플렉스 박스 레이아웃

 

CSS 그리드 레이아웃

• 새롭게 등장한 표준
• 플렉스 박스를사용할 때는 ‘주축’이라는 개념이 있어서 수평이나 수직 중 하나를 기 준으로 해서 요소를 배치한다.
• 하지만 CSS 그리드 레이아웃은 수평과 수직 어느 방향이든 배치할 수 있다.
  
  

CSS 그리드 레이아웃