Web/CSS

[CSS3] display : grid ① Grid, 배우면 뭐가 좋을까?

Joonfluence 2020. 10. 18.

 

 먼저 Flex와의 차이점에 대해서 알아보자. 우리는 Flex가 가로나 세로로 HTML 요소들을 정렬하는데 활용된다는 사실을 알고 있다. 이에 반해, Grid를 사용하면 가로와 세로를 포함한 면적에 대한 레이아웃을 짤 수 있게 된다. 

 

 기존에 Grid를 배우지 않은 상태에서는  float를 써서 화면을 구성해주어야 한다. 아래의 화면 레이아웃은 float를 활용한 레이아웃을 구성한 것이다. float를 써서 화면 레이아웃을 구성하는 것이 어려운 일은 아니다. width를 px 단위가 아니라, %로 주면 쉽게 해결할 수 있다. 

 

See the Pen 일반적인 HTML-CSS 레이아웃 설정 by joonho lee (@goldycoder)

 

비교를 위해 같은 작업을 Grid을 활용하여, 레이아웃을 짜보자. 각 태그에 grid-area의 이름으로 각각의 속성을 주고, grid-template-areas에 

"header header header"

"nav content aside"

"footer footer footer"

 

과 같은 값을 지정해주면, 쉽게 레이아웃을 지정할 수 있기 때문이다. float를 썼을 때와 비교했을 때 더 직관적으로 처리할 수 있다는 걸 알 수 있다. float는 이미지와 글을 함께 나열할 때 사용하는 CSS 속성으로 본래의 목적에도 어긋나며, 화면 레이아웃을 구성하기 위한 도구로 쓰기에도 부족함이 많다. 그러나 grid를 써주면, float보다 한번에 레이아웃을 구성하기에 편리한 것 같다. 

 

See the Pen grid-layout by joonho lee (@goldycoder) on CodePen.

 

 

 

반응형

댓글