[CSS] 그리드 레이아웃

Bam·2022년 3월 12일

CSS

목록 보기

17/34

그리드 레이아웃

반응형 웹 페이지를 설계할 때 화면 너비에 따라 요소를 재배치하게 되는데, 이때 기준이 되는 레이아웃을 그리드 레이아웃(grid layout)이라고 합니다. 그리드 레이아웃은 웹 페이지를 여러 column으로 나누고, 요소를 화면에 맞게 배치하는 것을 의미합니다.

그리드 레이아웃의 특징

그리드 레이아웃은 세 가지 특징을 갖습니다.

안정된 디자인

신문이나 기사, 웹 페이지를 보면 주로 좌우로 컨텐츠 영역을 배치하기 보다는 상하로 컨텐츠를 많이 배치하죠? 그리드 레이아웃은 여러개의 컬럼으로 나누고 위에서 밑으로 배치하는 구조를 갖게 해주기에 안정된 디자인을 제작할 수 있습니다.

간편한 업데이트

또한 그리드 레이아웃을 이용해서 페이지에 실제 내용을 넣지 않고 레이아웃만 먼저 배치할 수 있습니다. 이덕에 사이트의 설계가 간편해지고, 나중에 내용만 채우면 되며, 업데이트도 간결하다고 할 수 있습니다.

자유로운 요소 배치

기존에 레이아웃을 작성하기 위해 사용한 <div>같은 경우, 블록 요소이기 때문에 한 줄에 하나의 요소만 배치할 수 있었습니다. 아니면 CSS를 조작해서 변화를 주어야하고요. 그래서 이처럼 그리드 레이아웃을 이용하지 않은 사이트는 콘텐츠가 너무 많은 영역을 차지하기도 하고, 아래로 긴 페이지를 만들어낼 수 있습니다.
그리드 레이아웃을 사용하면 한 줄에 여러 요소를 배치할 있는 등 다양하고 자유로운 요소의 배치가 가능합니다.

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

그리드 레이아웃을 만드는 방법에는 여러가지가 있습니다. 지난 포스트에서 다룬 float 속성을 사용할 수도 있고, 플렉서블 박스 레이아웃, CSS 그리드 레이아웃을 적용할 수도 있습니다. float는 다뤘으니 넘어가고 나머지 두 방법에 대해 알아보겠습니다.

플렉서블 박스 레이아웃

플렉서블 박스 레이아웃(flexible box layout), 다른 말로 플렉스 박스는 그리드 레이아웃을 기준으로 각 박스들을 원하는 위치에 배치하는 방식입니다. 이때 페이지에 박스가 들어갈만한 공간이 생긴다면 박스를 유연하게 늘이고 줄여서 요소를 배치해줍니다.

플렉스 박스는 페이지의 row(가로), column(세로)를 주축으로 지정한 다음 주축에 맞추어 배치를 합니다.